Mobile Web Wearable Web

HTML5 SVG: Using SVG Elements

This tutorial demonstrates how you can use SVG as inline elements in HTML.

Warm-up

Become familiar with the HTML5 SVG API basics by learning about:

Making Shapes

To use inline SVG elements in your application, you must learn to create shapes:

  1. Create the SVG with the svg tag.
  2. Use the graphic elements to create various shapes. The absolute coordinates of the graphics element determine the size of the SVG.

    • To create a line between 2 assigned coordinates, use the <line> element:

      <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <line x1="20" y1="20" x2="220" y2="120" stroke="blue" stroke-width="5" />
</svg>

    • To create a rectangle at the assigned coordinates, use the <rect> element:

      <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <rect x="1" y="1" width="120" height="40" 
         fill="blue" stroke="red" stroke-width="2" />
</svg>

    • To create a circle with the assigned barycentric coordinate and radius, use the <circle> element:

      <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <circle cx="150" cy="100" r="50" fill="blue" stroke="red" stroke-width="3" />
</svg>

    • To create an ellipse with the assigned barycentric coordinate and the X and Y axis radius, use the <ellipse> element:

      <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <ellipse  cx="130" cy="80" rx="125" ry="50" fill="blue" />
</svg>

    • To create a polygon comprised of a set of assigned coordinates, use the <polygon> element:

      <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <polygon fill-rule="evenodd" fill="blue" stroke="black" 
            points="148,16 116,96 196,48 100,48 180,96" />
</svg>

Source Code

For the complete source code related to this use case, see the following file:

Grouping SVG Elements

To use inline SVG elements in your application, you must learn to group elements:

  1. Combine various SVG elements in a group using the <g> container element, whose id attribute must be defined.

    If you assign a presentation attribute to the group, all the child elements inherit it. For example, in the example below, the stroke color black is defined for the group, which means that both the rectangle and circle elements within the group use the black stroke color.

    <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px">
   <g id="shape-group" stroke="black">
      <desc>Shape Group</desc>
      <rect x="0.5" y="0.5"  fill="blue"  width="275" height="168"/>
      <circle fill="red" stroke-width="4" cx="245" cy="159" r="93"/>
   </g>

  2. You can reference the group using the id attribute:

       <use xlink:href="#shape-group" x="20" y="40"/>
   <use xlink:href="#shape-group" x="40" y="60"/>
   <use xlink:href="#shape-group" x="60" y="80"/>
</svg>

  3. If you have multiple groups, use the <defs> element as a container for them:

    <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px">
   <defs>
      <g id="shape-group" stroke="black">
         <desc>Shape Group 1</desc>
         <rect x="0.5" y="0.5"  fill="blue"  width="275" height="168"/>
         <circle fill="red" stroke-width="4" cx="245" cy="159" r="93"/>
      </g>
      <g id="shape-group2" stroke="black">
         <desc>Shape Group 2</desc>
         <rect x="0.5" y="0.5"  fill="red"  width="275" height="168"/>
         <circle fill="blue" stroke-width="4" cx="245" cy="159" r="93"/>
      </g>
   </defs>
   <g>
      <desc>Shape Group 3</desc>
      <use xlink:href="#shape-group" x="60" y="80 "/>
      <use xlink:href="#shape-group2" transform="rotate(40)" x="120" y="70"/>
      <use xlink:href="#shape-group" transform="rotate(15)" x="190" y="120"/>
      <use xlink:href="#shape-group2" transform="rotate(20)" x="120" y="70"/>
   </g>
</svg>

Source Code

For the complete source code related to this use case, see the following file:

Animating SVG Elements

To use inline SVG elements in your application, you must learn to animate elements:

  1. To animate a specific element attribute based on time, use the <animate> element:

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <rect x="1" y="1" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
      <animate attributeName="width" to="300" dur="5s" repeatCount="1" fill="remove"/>
   </rect>
   <rect x="1" y="50" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
      <animate attributeName="width" to="300" dur="5s" repeatCount="1" fill="freeze"/>
   </rect>
</svg>

  2. To change the (fill or line) color of the element, use the <animateColor> element:

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <rect x="1" y="1" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
      <animateColor to="red" attributeName="fill" dur="5s" repeatCount="indefinite" />
   </rect>
</svg>

  3. To create a motion animation, use the <animateMotion> element. The element assigns the parent element to the <mpath> as reference element, and animates according to the shape of the <mpath> element.

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <path d="M-12.5, -6.75 L12.5, -6.75 L0, -43.75 z" 
         fill="blue" stroke="gray" stroke-width="3">
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
         <mpath xlink:href="#path1"/>
      </animateMotion>
   </path>
   <path id="path1" d="M25, 100 Q50, 20 75, 70 T135, 70 T185, 70 T235, 70 T275, 70" 
         fill="none" stroke="blue" stroke-width="3" />
</svg>

Source Code

For the complete source code related to this use case, see the following file:

Controlling SVG Elements through Scripting

To use inline SVG elements in your application, you must learn to use scripting:

  1. Define an SVG element: 
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
   <rect x="1" y="1" width="120" height="40" fill="blue" 
         stroke="red" stroke-width="2" />
</svg>

  2. Use the <script> element to handle events related to the SVG elements.

    The script usage is similar to handling DOM as a script. The following example controls the SVG element's width attribute through the click event. 

    <script>
   var rectElemt = document.getElementById('rect')
   rectElemt].addEventListener('click', rect_click);

   function rect_click(event) 
   {
      var target = event.target
      var targetWidth = target.getAttribute("width");
      if (targetWidth == 120) 
      {
         target.setAttribute("width", targetWidth * 2);
      } 
      else 
      {
         target.setAttribute("width", targetWidth * 0.5);
      };
   };
</script>

Source Code

For the complete source code related to this use case, see the following file:

Go to top