Scalable Vector Graphics in HTML5

Scalable Vector Graphics in HTML5Basic concepts and usage

Skill Level: Introductory

Jeremy J. Wischusen ([email protected])Web Application ArchitectBinary Neuron L.L.C.

31 Jan 2012

Scalable Vector Graphics (SVG) are part of the vector family of graphics. They haveseveral benefits over their raster counterparts: JPEG, GIF, and PNG. In this article,explore the basic concepts and usage of SVG graphics in HTML5. Learn aboutdrawing, filters, gradients, text, and adding SVG XML to web pages.

Introduction

Scalable Vector Graphics (SVG) are part of the vector-based family of graphics.They are different from raster-based graphics, which store the color definition foreach pixel in an array of data. The most common raster-based formats used on theweb today are JPEG, GIF, and PNG, and each of these formats has strengths andweaknesses.

Frequently used abbreviations

• CSS: Cascading Style Sheets

• GIF: Graphics Interchange Format

• GUI: Graphical User Interface

• HTML: Hypertext Markup Language

• JPEG: Joint Photographic Experts Group

• PNG: Portable Network Graphics

• SVG: Scalable Vector Graphics

Scalable Vector Graphics in HTML5 Trademarks© Copyright IBM Corporation 2012 Page 1 of 22

mailto:[email protected]

http://www.ibm.com/developerworks/ibm/trademarks/

http://www.ibm.com/legal/copytrade.shtml

• XML: Extensible Markup Language

SVG has several advantages over any raster-based format:

• SVG graphics are created using mathematical formulas that require farless data to be stored in the source file because you don't have to storethe data for each individual pixel.

• Vector images scale better. With images on the web, trying to scale animage up from its original size can result in distorted (or pixilated) images.The original pixel data was designed for a specific size. When the imageis no longer that size, the program displaying the image guesses as towhat data to use to fill in the new pixels. Vector images are more resilient;when the size of the image changes, the mathematical formulas can beadjusted accordingly.

• The source file size tends to be smaller, so SVG graphics load faster thantheir raster counterparts and use less bandwidth.

• SVG images are rendered by the browser and can be drawnprogrammatically. They can be changed dynamically, making themespecially suited for data-driven applications, such as charts.

• The source file for an SVG image is a text-based file, so it's bothaccessible and search engine friendly.

In this article, learn about the benefits of SVG formats and how they can help in yourweb design efforts in HTML5.

SVG basics

To create an SVG graphic you use an entirely different process than when creating aJPEG, GIF, or PNG file. JPEG, GIF, and PNG files are usually created with animage editing program, such as Adobe Photoshop. SVG images are typicallycreated using an XML-based language. There are SVG editing GUIs that willgenerate the underlying XML for you. However, for this article, it is assumed you'reworking with the raw XML. See Resources for information about SVG editingprograms.

Listing 1 shows an example of a simple SVG XML file that draws a red circle with a2-pixel black border.

Listing 1. SVG XML file

developerWorks® ibm.com/developerWorks




<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" /></svg>

The code above results in the drawing in Figure 1.

Figure 1. Red circle with 2-pixel black border

Creating basic shapes

With SVG graphics, you use XML tags to create shapes, and Table 1 shows theseXML elements.

Table 1. XML elements for creating SVG graphicsElement Description

line Creates a simple line.

polyline Defines shapes built from multiple line definitions.

rect Creates a rectangle.

circle Creates a circle.

ellipse Creates an ellipse.

polygon Creates a polygon.

path Allows for the definition of arbitrary paths.

The line element

The line element is the basic drawing element. Listing 2 shows how to create ahorizontal line.

Listing 2. Creating a horizontal line

<svg xmlns="http://www.w3.org/2000/svg" version='1.1'width="100%" height="100%" >

<line x1='25' y1="150" x2='300' y2='150'style='stroke:red;stroke-width:10'/>

</svg>

ibm.com/developerWorks developerWorks®




The code from Listing 2 results in the drawing in Figure 2.

Figure 2. Basic horizontal line

The root SVG tag has width and height attributes that define the area of the canvasavailable for drawing. They work like the height and width attributes of other HTMLelements. In this case, the canvas is set to take up all of the available space.

The example also uses the style tag. SVG graphics support styling of their contentwith a variety of methods. The styles in this article are included to make them standout or when certain attributes, such as stroke colors and widths, are required tomake the drawing render. Resources has more information about styling SVGgraphics.

You can create a line definition by defining the starting and ending x and ycoordinates relative to the canvas. The x1 and y1 attributes are the startcoordinates and the x2 and y2 attributes are the end coordinates. To change thedirection of the line, you simply change the coordinates. For example, by modifyingthe previous example you can produce a diagonal line, as shown in Listing 3.

Listing 3. Creating a diagonal line

<svg xmlns="http://www.w3.org/2000/svg" version='1.1'width="100%" height="100%" >

<line x1="0" y1="0" x2="200" y2="200"style='stroke:red;stroke-width:10'/>

</svg>

Figure 3 shows the result of the code in Listing 3.

Figure 3. Diagonal line





The polyline element

A polyline is a drawing made up of multiple line definitions. The example in Listing 4creates a drawing that looks like a set of stairs.

Listing 4. Creating polyline stairs

<svg xmlns="http://www.w3.org/2000/svg"width="100%" height="100%" version='1.1'>

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"style="fill:white;stroke:red;stroke-width:4"/>

</svg>


Figure 4. Polyline stairs

You create a polyline by using the points attribute and defining pairs of x and ycoordinates separated by commas. In the example, the first point is defined as 0,40where 0 is the x value and 40 is the y value. However, a single set of points is notenough to get anything to display on the screen because that only tells the SVGrenderer where to start. At a minimum, you need two sets of points: a starting pointand an ending point (for example, points="0,40 40,40”).

As with the simple line drawings, the lines need not be strictly horizontal or vertical. Ifyou change the values of the previous example, as in Listing 5, you can produceirregular line shapes.

Listing 5. Creating an irregular line


<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"style="fill:white;stroke:red;stroke-width:3"/>

</svg>

The code from Listing 5 yields the drawing shown in Figure 5.





Figure 5. Irregular line

The rect element

Creating a rectangle is as simple as defining a width and a height, as shown inListing 6.

Listing 6. Creating a rectangle


<rect width="300" height="100"style="fill:red"/>

</svg>


Figure 6. Rectangle

You can also create a square with the rect tag; a square is simply a rectanglewhere the height and width are the same.

The circle element

You create a circle by defining the x and y coordinates of the center of the circle anda radius, as shown in Listing 7.





Listing 7. Creating a circle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" fill="red"/>

</svg>


Figure 7. Circle

The cx and cy attributes define the center of the circle relative to the drawingcanvas. Because the radius is half the width of the circle, when defining the radiusremember that the overall width of the image will be twice that value.

The ellipse element

An ellipse is basically a circle with code that defines two radii, as shown in Listing 8.

Listing 8. Creating an ellipse

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/>

</svg>


Figure 8. Ellipse





Again, the cx and cy attributes define the center coordinates relative to the canvas.With an ellipse, though, you define one radius for the x axis and one for the y axisusing the rx and ry attributes.

The polygon element

A polygon is a shape that contains at least three sides. Listing 9 creates a simpletriangle.

Listing 9. Creating a triangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon points="200,10 250,190 160,210"

style="fill:red;stroke:black;stroke-width:1"/></svg>


Figure 9. Triangle polygon





Similar to the polyline element, you create polygons by defining pairs of x and ycoordinates using the points attribute.

You can create polygons with any number of sides by adding x and y pairs. Bymodifying the previous example, you can create a four-sided polygon, as shown inListing 10.

Listing 10. Creating a four-sided polygon

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon points="220,10 300,210 170,250 123,234"



Figure 10. Four-sided polygon





You can even create complex shapes using the polygon tag. Listing 11 creates adrawing of a star.

Listing 11. Creating a star

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon points="100,10 40,180 190,60 10,60 160,180 100,10"



Figure 11. Star polygon





The path element

With the path element, the most complex of all the drawing elements, you cancreate arbitrary drawings using a set of specialized commands. The path elementsupports the commands in Table 2.

Table 2. Commands supported by the path elementCommand Description

M Move to

L Line to

H Horizontal line to

V Vertical line to

C Curve to

S Smooth curve to

Q Quadratic Bezier curve to

T Smooth quadratic Bezier curve to

A Elliptical arc to

Z Close path to

You can use these commands in upper or lowercase form. When the command is inuppercase, absolute positioning is applied. When it is in lowercase, relativepositioning is applied. Supplying examples of all the commands is outside the scopeof this article. However, the following examples demonstrate their basic usage.

You can create any of the simple shapes from previous examples in this article usingthe path element. Listing 12 creates a basic triangle using the path element.





Listing 12. Creating a triangle using the path element

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>

</svg>


Figure 12. Triangle using the path element

The list of commands is defined using the d attribute. In this example, the drawingstarts at an x coordinate of 150 and a y coordinate of 0, as defined by the move tocommand (M150 0). It then draws a line to the x/y coordinates x = 75 and y = 200using the line to command (L75 200). Next, it draws another line using another lineto command (L225 200). Finally, the drawing is closed off using the close tocommand (Z). No coordinates are supplied with the Z command because to closethe path you are, by definition, drawing a line from the current position back to thestarting point of the drawing (in this case, x = 150 y =0).

The intention here was to show a basic example; if all you want is a simple triangle,you're better off using the polygon tag.

The real power of the path element is the ability to create custom shapes, as shownin Listing 13. The example is from the World Wide Web Consortium (W3C)document, Scalable Vector Graphics (SVG) 1.1 (Second Edition) (see Resources).

Listing 13. Creating a custom shape using the path element

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"

fill="red" stroke="blue" stroke-width="5"/>





<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"fill="yellow" stroke="blue" stroke-width="5"/>

<path d="M600,350 l 50,-25a25,25 -30 0,1 50,-25 l 50,-25a25,50 -30 0,1 50,-25 l 50,-25a25,75 -30 0,1 50,-25 l 50,-25a25,100 -30 0,1 50,-25 l 50,-25"fill="none" stroke="red" stroke-width="5"/>

</svg>


Figure 13. Custom shape using the path element

With the path element you can create complex drawings, such as charts and wavelines. Note that this example uses multiple path elements. You are not limited to asingle drawing element within the root SVG tag when creating drawings.

Filters and gradients

In addition to the basic CSS styling in many of the examples thus far, SVG graphicsalso support the use of filters and gradients. In this section, learn how to apply filtersand gradients to SVG drawings.

Filters

You can use filters to apply special effects to SVG graphics. SVG supports thefollowing filters.

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix





• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

See Resources for a detailed explanation about using these filters.

Listing 14 creates a drop shadow effect that is applied to a rectangle.

Listing 14. Creating a drop shadow effect for a rectangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>

<filter id="f1" x="0" y="0"width="200%" height="200%">

<feOffset result="offOut" in="SourceAlpha"dx="20" dy="20"/>

<feGaussianBlur result="blurOut"in="offOut" stdDeviation="10"/>

<feBlend in="SourceGraphic"in2="blurOut" mode="normal"/>

</filter></defs><rect width="90" height="90" stroke="green"

stroke-width="3" fill="yellow" filter="url(#f1)"/></svg>


Figure 14. Drop shadow effect for a rectangle





You define filters within the def (for definitions) element. The filter in this example isassigned an id of "f1". The filter tag itself has attributes for defining the x and ycoordinates and the width and height of the filter. Inside of the filter tag, you usethe desired filter elements and set their properties to the desired values.

After defining the filter, you associate it with a particular drawing by using thefilter attribute, as shown in the rect element. Set the url value to the value ofthe id attribute that you assigned the filter.

Gradients

A gradient is a gradual transition from one color to another. Gradients come in twobasic forms: linear and radial. The type of gradient applied is determined by theelement you use. The following examples show linear and radial gradients applied toan ellipse.

Listing 15 creates an ellipse with linear gradient.

Listing 15. Creating an ellipse with linear gradient


<linearGradient id="grad1" x1="0%" y1="0%"x2="100%" y2="0%">

<stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/>


</linearGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55"

fill="url(#grad1)"/></svg>


Figure 15. Ellipse with linear gradient





Listing 16 creates an ellipse with radial gradient.

Listing 16. Creating an ellipse with radial gradient


<radialGradient id="grad1" cx="50%" cy="50%"r="50%" fx="50%" fy="50%">



</radialGradient></defs><ellipse cx="200" cy="70" rx="85" ry="55"

fill="url(#grad1)"/></svg>


Figure 16. Ellipse with radial gradient

Gradients, like filters, are defined within the def element. Each gradient is assignedan id. Gradient attributes, such as the colors, are set inside of the gradient tag usingstop elements. To apply a gradient to a drawing, set the url value for the fillattribute to the id of the desired gradient.

Text and SVG





In addition to basic shapes, you can also use SVG to generate text, as shown inListing 17.

Listing 17. Creating text with SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><text x="0" y="15" fill="red">I love SVG</text>

</svg>

The code in Listing 17 results in the drawing in Figure 17.

Figure 17. SVG text

The example uses a text element to create the sentence I love SVG. When youuse the text element, the actual text to be displayed is between an opening and aclosing text element.

You can display text along numerous axes and even along paths. Listing 18 displaystext along an arched path.

Listing 18. Creating text along an arched path

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink">

<defs><path id="path1" d="M75,20 a1,1 0 0,0 100,0"/>

</defs><text x="10" y="100" style="fill:red;">

<textPath xlink:href="#path1">I love SVG I love SVG</textPath></text>

</svg>


Figure 18. Text on an arched path

In this example, an additional XML namespace xlink is added to the root SVG tag.The path used to arch the text is created inside of the def element so the path doesnot actually get rendered as part of the drawing. The text to be displayed is nestedinside of a textPath element that uses the xlink namespace to refer to the id of





the desired path.

As with other SVG drawings, you can also apply filters and gradients to text. Listing19 applies a filter and a gradient to some text.

Listing 19. Creating text with a filter and gradient

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink">

<defs><radialGradient id="grad1" cx="50%" cy="50%"

r="50%" fx="50%" fy="50%"><stop offset="0%"

style="stop-color:red; stop-opacity:0"/><stop offset="100%"

style="stop-color:rgb(0,0,0);stop-opacity:1"/></radialGradient><filter id="f1" x="0" y="0"

width="200%" height="200%"><feOffset result="offOut"

in="SourceAlpha" dx="20" dy="20"/><feGaussianBlur result="blurOut"

in="offOut" stdDeviation="10"/><feBlend in="SourceGraphic"

in2="blurOut" mode="normal"/></filter>

</defs><text x="10" y="100" style="fill:url(#grad1); font-size: 30px;"

filter="url(#f1)">I love SVG I love SVG

</text></svg>


Figure 19. Text with a filter and gradient

Adding SVG XML to web pages

After you create your SVG XML, there are several ways to include it in your HTMLpages. The first method is to directly embed the SVG XML into the HTML document,as shown in Listing 20.

Listing 20. Directly embed SVG XML into an HTML document

<html><head>





<title>Embedded SVG</title></head><body style="height: 600px;width: 100%; padding: 30px;">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" fill="red"/>

</svg></body>

</html>

This method is perhaps the simplest, but it does not promote reuse. Remember thatyou can save an SVG XML file using the .svg extension. When you save the SVGdrawing in an .svg file, you can use embed, object, and iframe elements toinclude it in your pages. Listing 21 shows the code to include an SVG XML file usingan embed element.

Listing 21. Include an SVG XML file using an embed element

<embed src="circle.svg" type="image/svg+xml" />

Listing 22 shows how to include an SVG XML file using an object element.

Listing 22. Include an SVG XML file using an object element

<object data="circle.svg" type="image/svg+xml"></object>

Listing 23 shows the code to include an SVG XML file using an iframe element.

Listing 23. Include an SVG XML file using an iframe element

<iframe src="circle1.svg"></iframe>

When using one of these methods, you can include the same SVG drawing inmultiple pages and make updates by editing the .svg source file.

Summary

This article covered the basics of creating drawings using the SVG format. Youlearned how to create basic shapes using the built-in geometric elements, such asline, rectangle, circle, and so on. You also learned how to use the path element tocreate complex drawings by issuing a series of commands, such as move to, line to,and arc to. The article also explored how to apply filters and gradients to SVGdrawings, including text drawings, and how to include your SVG graphics in HTMLpages.









Resources

Learn

• Vector graphics editors: Go through this list on Wikipedia to try some of theSVG editing programs.

• Styling in W3W Scalable Vector Graphics (SVG) 1.1 (Second Edition) has moreabout styling SVG graphics.

• Paths in W3W Scalable Vector Graphics (SVG) 1.1 (Second Edition) has moreinformation about using SVG paths.

• Filter Effects in W3W Scalable Vector Graphics (SVG) 1.1 (Second Edition)gives a detailed explanation of the filters mentioned in this article.

• Render dynamic graphs in SVG (developerWorks, October 2004): Explains howto create SVG graphs that scale dynamically with their content.

• Scalable Vector Graphics on Wikipedia offers background information.

• SVG 1.1/1.2/2.0 Requirements from W3C has information about the designprinciples and requirements for future versions of the SVG language.

• Scalable Vector Graphics: Visit the W3C SVG site.

• SVG Tutorial: Learn about SVG in this interactive w3schools tutorial.

• HTML5: Designing Rich Internet Applications (Visualizing the Web) providesexamples for drawing in SVG.

• Take a look at the XML area on developerWorks to get the resources you needto advance your skills in the XML arena, including DTDs, schemas, and XSLT.See the XML technical library for a wide range of technical articles and tips,tutorials, standards, and IBM Redbooks.

• IBM XML certification: Find out how you can become an IBM-CertifiedDeveloper in XML and related technologies.

• developerWorks technical events and webcasts: Stay current with technology inthese sessions.

• developerWorks on Twitter: Join today to follow developerWorks tweets.

• developerWorks podcasts: Listen to interesting interviews and discussions forsoftware developers.

• developerWorks on-demand demos: Watch demos ranging from productinstallation and setup for beginners to advanced functionality for experienceddevelopers.

Get products and technologies



http://en.wikipedia.org/wiki/List_of_vector_graphics_editors

http://www.w3.org/TR/SVG/styling.html

http://www.w3.org/TR/SVG/paths.html

http://www.w3.org/TR/SVG/filters.html

http://www.ibm.com/developerworks/xml/library/x-svggrph/

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

http://www.w3.org/TR/SVG2Reqs/

http://www.w3.org/Graphics/SVG/

http://www.w3schools.com/svg/default.asp

http://www.amazon.com/HTML5-Designing-Internet-Applications-Visualizing/dp/0240813286/ref=sr_1_1?s=books&ie=UTF8&qid=1317297141&sr=1-1

https://www.ibm.com/developerworks/xml/

http://www.ibm.com/developerworks/views/xml/libraryview.jsp

http://www-03.ibm.com/certify/certs/01001503.shtml

http://www.ibm.com/developerworks/briefings/

http://twitter.com/#!/developerworks/

https://www.ibm.com/developerworks/mydeveloperworks/groups/service/html/communityview?communityUuid=70786d1c-a2d4-4de8-a807-fccfa600bc77

http://www.ibm.com/developerworks/demos/



• IBM product evaluation versions: Download or explore the online trials in theIBM SOA Sandbox and get your hands on application development tools andmiddleware products from DB2®, Lotus®, Rational®, Tivoli®, andWebSphere®.

Discuss

• developerWorks profile: Create your profile today and set up a watchlist.

• XML zone discussion forums: Participate in any of several XML-relateddiscussions.

• The developerWorks community: Connect with other developerWorks userswhile exploring the developer-driven blogs, forums, groups, and wikis.

About the author

Jeremy J. WischusenJeremy Wischusen has over 13 years of experience designing websitesand applications for clients such as Purple Communications,myYearbook.com, HBO, and others, building both front- and back-endsystems with Flash, Flex, jQuery, PHP, MySQL, MSSQL, andPostgreSQL. He has taught web design, Flash, and ActionScript forclients such as Wyeth Pharmaceuticals, The Vanguard Group, BucksCounty Community College, and The University of the Arts.



http://www.ibm.com/developerworks/downloads/

http://www.ibm.com/developerworks/downloads/soasandbox/

http://www.ibm.com/developerworks/downloads/soasandbox/

https://www.ibm.com/developerworks/mydeveloperworks/profiles/home.do?lang=en

https://www.ibm.com/developerworks/mydeveloperworks/homepage/help/doc/en/homepage_watchlistuse.html

http://www.ibm.com/developerworks/forums/dw_xforums.jspa

https://www.ibm.com/developerworks/community



Documents

Scalable Vector Graphics in HTML5