Did you find this useful?
Socialize it today.


HTML5 SVG

Wednesday, October 31, 2012

Scalable Vector Graphics (SVG) are part of the vector-based family of graphics. They are quite different from raster-based graphics that you may be accustomed to working with. The most common raster-based formats used on the web today are JPEG, GIF, and PNG. SVG has several advantages over raster-based formats. For example, SVG graphics are created using mathematical formulas. This requires much less data to be processed since you do not have to store data for each individual pixel. In addition, vector images scale much better. Distortion of an image can occur when scaling raster-based graphics. SVG images can also be changed dynamically, making them especially suited for data-driven applications, such as charts.


Support for SVG

Most of the web browsers that are in use today have support for displaying SVG images. Internet Explorer 9, Firefox, Opera, Chrome, and Safari support SVG. For Internet Explorer earlier than version 9, users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.


SVG viewBox

The SVG viewbox is used when creating SVG shapes. The view box is part of the canvas you want the viewer to see. Do not confuse the width and height of the view box with the width and height you set for the SVG document. The width and height of the SVG element sets the size of the drawing canvas. The viewBox attributes uses four parameters: beginning x coordinate, beginning y coordinate, width of the view box, and height of the view box.


Basic Shapes

SVG images are generally created using an XML-based language. In HTML5, you can embed SVG elements directly into your HTML page. In this tutorial, we will draw some basic shapes using the SVG and other related elements.


Circle

The <circle> element defines a circle based on a center point and a radius.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
     <circle cx="250" cy="125" r="100" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00" />
</svg>





AttributeDescription
cxx coordinate of the center of the circle
cyy coordinate of the center of the circle
rradius of the circle
fillThe color that will fill the interior of the shape
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Ellipse

The <ellipse> element is nothing more than a circle that is defined with two radii

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
     <ellipse cx="250" cy="125" rx="100" ry="50" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00" />
</svg>





AttributeDescription
cxx coordinate of the center of the ellipse
cyy coordinate of the center of the ellipse
rxx-axis radius of the ellipse
ryy-axis radius of the ellipse
fillThe color that will fill the interior of the shape
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Rectangle

The <rect> element defines a rectangle which is axis-aligned with the current user coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes 'rx' and 'ry'.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
     <rect x="20" y="20" rx="10" ry="10" width="450" height="225" stroke="#7F7F7F" stroke-width="3" fill="#FFAA00"  />
</svg>





AttributeDescription
xx coordinate of the corner of the rectangle
yy coordinate of the corner of the rectangle
rxx-axis radius of the ellipse used to round off the corners of the rectangle
ryy-axis radius of the ellipse used to round off the corners of the rectangle
widthWidth of the rectangle
heightHeight of the rectangle
fillThe color that will fill the interior of the shape
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Line

The <line> element defines a line segment that starts at one point and ends at another.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
     <line x1="0" y1="0" x2="500" y2="250" stroke="#FFAA00" stroke-width="5" />
</svg>





AttributeDescription
x1starting x coordinate
y1staring y coordinate
x2ending x coordinate
y2ending y coordinate
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Polyline

The <polyline> element allows you to create a drawing of multiple line definitions.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 500 250">
     <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160 160,200" 
             fill="transparent" stroke="#FFAA00" stroke-width="3" />
</svg>





AttributeDescription
x,y x,yCoordinates used to create the path between two points
fillThe color that will fill the interior of the shape
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Polygon

The <polygon> element defines a closed shape consisting of a set of connected straight line segments.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="250" viewBox="0 0 750 375">
     <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"
             fill="#FFAA00" stroke="#7F7F7F" stroke-width="3" />
</svg>





AttributeDescription
x,y x,yCoordinates used to create the path between two points
fillThe color that will fill the interior of the shape
strokeThe color that will be used to outline the shape
stroke-widthThe thickness of the outline



Example

In the following example, we will draw various lines to form an interesting image. We can use the <g> element to group the <line> elements.


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250" viewBox="0 0 250 250">
   <g stroke="#7F7F7F" stroke-width="1">
       <line x1="0" y1="0" x2="0" y2="250" />
       <line x1="0" y1="250" x2="250" y2="250" />
       <line x1="0" y1="10" x2="10" y2="250" />
       <line x1="0" y1="20" x2="20" y2="250" />
       <line x1="0" y1="30" x2="30" y2="250" />
       <line x1="0" y1="40" x2="40" y2="250" />
       <line x1="0" y1="50" x2="50" y2="250" />
       <line x1="0" y1="60" x2="60" y2="250" />
       <line x1="0" y1="70" x2="70" y2="250" />
       <line x1="0" y1="80" x2="80" y2="250" />
       <line x1="0" y1="90" x2="90" y2="250" />
       <line x1="0" y1="100" x2="100" y2="250" />
       <line x1="0" y1="110" x2="110" y2="250" />
       <line x1="0" y1="120" x2="120" y2="250" />
       <line x1="0" y1="130" x2="130" y2="250" />
       <line x1="0" y1="140" x2="140" y2="250" />
       <line x1="0" y1="150" x2="150" y2="250" />
       <line x1="0" y1="160" x2="160" y2="250" />
       <line x1="0" y1="170" x2="170" y2="250" />
       <line x1="0" y1="180" x2="180" y2="250" />
       <line x1="0" y1="190" x2="190" y2="250" />
       <line x1="0" y1="200" x2="200" y2="250" />
       <line x1="0" y1="210" x2="210" y2="250" />
       <line x1="0" y1="220" x2="220" y2="250" />
       <line x1="0" y1="230" x2="230" y2="250" />
       <line x1="0" y1="240" x2="240" y2="250" />
   </g>
</svg>






Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 Murachs HTML5 and CSS3 HTML CSS and JavaScript