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 show HTML of 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>| Attribute | Description |
|---|---|
cx | x coordinate of the center of the circle |
cy | y coordinate of the center of the circle |
r | radius of the circle |
fill | The color that will fill the interior of the shape |
stroke | The color that will be used to outline the shape |
stroke-width | The 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>| Attribute | Description |
|---|---|
cx | x coordinate of the center of the ellipse |
cy | y coordinate of the center of the ellipse |
rx | x-axis radius of the ellipse |
ry | y-axis radius of the ellipse |
fill | The color that will fill the interior of the shape |
stroke | The color that will be used to outline the shape |
stroke-width | The 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>| Attribute | Description |
|---|---|
x | x coordinate of the corner of the rectangle |
y | y coordinate of the corner of the rectangle |
rx | x-axis radius of the ellipse used to round off the corners of the rectangle |
ry | y-axis radius of the ellipse used to round off the corners of the rectangle |
width | Width of the rectangle |
height | Height of the rectangle |
fill | The color that will fill the interior of the shape |
stroke | The color that will be used to outline the shape |
stroke-width | The 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>| Attribute | Description |
|---|---|
x1 | starting x coordinate |
y1 | staring y coordinate |
x2 | ending x coordinate |
y2 | ending y coordinate |
stroke | The color that will be used to outline the shape |
stroke-width | The 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>| Attribute | Description |
|---|---|
x,y x,y | Coordinates used to create the path between two points |
fill | The color that will fill the interior of the shape |
stroke | The color that will be used to outline the shape |
stroke-width | The 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>| Attribute | Description |
|---|---|
x,y x,y | Coordinates used to create the path between two points |
fill | The color that will fill the interior of the shape |
stroke | The color that will be used to outline the shape |
stroke-width | The thickness of the outline |
Example
The following example of code 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>
