SVG for Beginners Tutorial

HTML5 For Web Designers and Developers

SVG Examples What is SVG? Create SVG Graphics SVG XML Structure Inline Versus Image Source Assign SVG to an Image SVG Testing SVG Issues Summary SVG Circle Markup SVG Text Markup SVG as Image Source Markup SVG HTML5 All Source

Introduction

This tutorial introduces SVG for beginners. This lesson discusses the advantages of SVG. The examples demonstrate creating SVG with markup and assigning a separate SVG file to an image's src property. The tutorial covers the structure of an SVG file, some issues and workarounds with SVG graphics.

SVG is an excellent choice for lightweight and resolution independent simple game graphics, with effects and animation. For more complex images use bitmap graphics.

What is SVG?

SVG stands for Scalable Vector Graphic. Vector images are mathematically defined graphic elements such as lines, arcs, and fills.

Vector graphics and bitmap graphics use different display techniques. Each has it's advantages.

Vector graphics work best with simple shapes, solid, or gradient fills. However bitmap graphics are better suited for photographs and images with a high level of detail or variation.

Bitmap graphics are defined with pixels. One pixel displays one color. Examples of bitmap graphic file formats include JPG, PNG, and GIF. Zoom into a bitmap graphic and either the pixels appear as choppy squares or software smooths the graphic and it looks blurry.

However vector graphics provide beautiful crisp, clear outlines, regardless of the zoom level. Vector graphics allow designers to create images which look great for all display resolutions. View SVG at high and low resolutions and the quality remains the same. Regardless of an SVG's scale value or dimensions the file size never changes. If you view the graphic on a 3 x 4 foot TV screen or on a 3 x 4 inch mobile screen, the quality of the graphic appears identical unless the display device itself has deficiencies.

Bitmap graphic formats employ different compression schemes. For example JPG images often appear blurry when highly compressed. GIF images restrict the color range to 256 distinct entries. The palette restriction allows compression techniques which do not lose detail or color. Yet the small range of colors often constrains creativity. With SVG the original layout and colors do not change.

SVG Shapes and Fills

Graphics defined with vectors include a range of shapes and fills. SVG 1.1 includes rectangle, circle, ellipse, line, polygon, polyline, path, text, stroking, filters, effects, shadows, gradients and color fills.

SVG can use any available color. It's also possible to embed bitmap images within SVG using the image tag as well.

Create SVG Graphics

SVG graphics are defined in XML. XML can be stored in a simple text file. XML consists of tags and data in a structured order. The tutorial Create an XML File includes more information regarding XML file structure. However SVG XML uses different tags, attributes, and values.

Use a common text editor or the free Eclipse IDE, to create an SVG graphic. Type in the appropriate tags, attributes, and values. More expensive options include using a vector graphic software application such as Adobe Illustrator, then save the file to the SVG format.

Adobe Illustrator and other graphics applications speed the creation of SVG graphics with tools to drag, drop, change colors, gradients, and create transformations. However they may add some unnecessary fields to the final SVG XML file. It's helpful to check the final file, and possibly remove unsupported tags, attributes, or other properties. See online sources such as www.w3.org/2000/svg, for standard properties.

SVG XML Structure

  1. Comments use the same syntax as HTML: <!-- my comment -->
  2. SVG opening tag: <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  3. SVG shapes: rectangle, circle, ellipse, line, polygon, polyline, path, text, and stroke type. See the markup for circle, text, and rectangle.
  4. Other options include filters, effects, shadows, and gradients, animate, animateColor, and animateMotion.
  5. SVG closing tag: </svg>

The file listed below defines a rectangle with dark blue stroke outline and lighter blue fill.

SVG Markup

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

<rect 
 x="4%" 
 y="4%" 
 fill="#3FA9F5" 
 stroke="#0000FF" 
 stroke-width="4%" 
 width="92%" 
 height="50%"
/>
	
</svg>

Inline Versus Image Source

At least two techniques may be used to display SVG in a Web page. Create the SVG markup inline or assign an SVG file to an HTML image element's src property. Inline SVG markup simply inserts the SVG markup into a Web page. Learn to assign an SVG file to an image element's src property with the following section.

Assign SVG to an Image

Create separate SVG files with vector editing software such as Adobe Illustrator. Save the file as an SVG file. Optionally use a text editor. Type in the markup which declares graphical tags, properties, and values. Either way the file should end with .svg.

Assign the file to the an HTML image's src property. The following listing demonstrates how to assign rectangle.svg to an image element.

<img  
 src="rectangle.svg" 
 alt="SVG Rectangle"
/> 

Test Results

Any HTML5 compatible Web browser should display SVG correctly. However some older browsers such as Android 2.2's default Web browser won't display SVG. If your target audience might use browsers which don't display SVG graphics at all, consider bitmap graphics or HTML and CSS instead of SVG.

Issues

Older Web browsers such as Opera 12.16, Safari 5.1.7, and Firefox 23.0.1 for Windows Vista, crop inline SVG graphics to fit within enclosing HTML elements. A cropped image displays with one or more edges clipped. Part of the image doesn't display. The image appears cropped if SVG resides within an HTML element too small to show the entire graphic.

However Opera, Safari, and Firefox for Windows Vista, display full size SVG images when assigned as separate files to an HTML image src property. Also SVG files render full size when displayed in their own dedicated Web page. For example see the rectangle.svg in a separate browser window.

If your Web page's target audience might run Windows Vista, it's probably best to employ SVG graphics as separate files.

Summary

This tutorial introduced SVG for beginners. This lesson discussed the advantages of SVG. The examples demonstrate creating SVG with markup and assigning a separate SVG file to an image's src property. The tutorial covered the structure of an SVG file, some issues and workarounds with SVG graphics on older browsers.

SVG is an excellent choice for lightweight and resolution independent simple game graphics, with effects and animation. For more complex images use bitmap graphics.

See More SVG & HTML5 Examples with Tutorials.

More SVG & HTML5 Examples with Tutorials

Copyright © 2015 Seven Thunder Software. All Rights Reserved.