SVG Circle & Text Tutorial

HTML5 For Web Designers and Developers

SVG Circle, Text, Rectangle Examples Inline SVG Circle Inline Versus Image Source Assign SVG to an Image Image Tag with circle.svg SRC Inline SVG Text Image Tag with text.svg SRC Summary SVG Source Code

Introduction

This tutorial explains how to prepare a circle and text with SVG. For an introduction to SVG see SVG Rectangle: Beginner's Guide.

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

Inline SVG Circle

The SVG code for a circle is displayed inline in this example. Inline means that the HTML file itself contains the SVG markup. The SVG markup follows. Notice the stroke's declared with the hexadecimal color format of #FFFFFF, or pure white. The fill's declared with a named color, blue. SVG accepts either color format convention. Attributes cx and cy declare the X and Y origin, or center, of the circle. Attribute r determines the circle's radius.

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

<circle 
 cx="50%" 
 cy="50%" 
 r="18%" 
 stroke="#FFFFFF" 
 stroke-width="4%"
 fill="blue" 
/>
 
</svg>

SVG as Image Source

Assign a separate SVG file to the src attribute of the img element in HTML markup. For example, assign SVG XML markup for, circle.svg exactly, as you would assign a bitmap JPG, PNG, or GIF file. The SVG file is assigned to the img tag's src attribute. Save the previous Inline SVG Circle markup to file, circle.svg, then assign circle.svg to an image tag's src property, as follows.

<img  
 src="circle.svg" 
 alt="SVG Circle"
>

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. Optionally use a text editor. Save the file as an SVG file; prepend the file name with svg. Type in the markup which declares graphical tags, properties, and values. Either way the file should end with .svg.

For example create a file named, circle.svg, with the Inline SVG Circle markup, presented above. Assign the file to the an HTML image's src property. The following listing demonstrates how to assign circle.svg to an image element.

<img  
 src="circle.svg" 
 alt="SVG Circle"
/> 

Image Tag with circle.svg SRC

The following graphic displays circle.svg as an image property.

Circle Declared with SVG

Inline SVG Text

The SVG code for text is displayed inline in this example and the following markup. Inline means that the HTML file itself contains the SVG markup. Tag text indicates a character will display. Attributes x and y declare the coordinates for each text tag. In this example the Y coordinate always equals 68. The X coordinate starts at 0, then increases by percentenges from 40% to 80%. The SVG markup follows.

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

<text  
fill="#00FFFF"  
font-size="68" 
x="0" 
y="68"
>
S
</text>

<text  
fill="#FFFF00" 
font-size="68" 
x="40%" 
y="68"
>
V
</text>

<text  
fill="#FF00FF" 
font-size="68" 
x="80%" 
y="68">
G
</text>

</svg>

Assign Text to Image SRC

Use the same techniques described in the previous section titled Inline Versus Image Source.

Image Tag with text.svg SRC

The following graphic displays text.svg as an image property.

Text Declared with SVG

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 explained how to prepare a circle and text with SVG. For an introduction to SVG see SVG Rectangle: Beginner's Guide.

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

More SVG & HTML5 Examples with Tutorials

Copyright © 2015 Seven Thunder Software. All Rights Reserved.