SVG for Beginners Source Code

Free example of Scalable Vector Graphics (SVG) markup which provides an introductory understanding of SVG.

SVG Circle, Text, Rectangle Example SVG for Beginners Tutorial Inline SVG Circle Inline SVG Text SVG as Image Source Contents of rectangle.svg

Inline SVG Circle

The SVG code for a circle is displayed inline in this example and the following markup. 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. The fill's declared with a named color blue. SVG accepts either color format convention. Attributes cx and cy declare the X and Y location 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>

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. 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>

SVG as Image Source

Assign a separate SVG file to the src attribute of the img element in HTML markup. Assign SVG XML markup for rectangle.svg the same as assignment for bitmap JPG, PNG, or GIF files. The SVG file is assigned to the img tag's src attribute. See the SVG image example and the markup below.

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

Contents of rectangle.svg

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

<rect 
x="4%" 
y="4%" 
fill="blue" 
stroke="#00FFFF" 
stroke-width="4%" 
width="92%" 
height="50%"
/>

</svg>

See More SVG & HTML5 Examples with Tutorials.

More SVG & HTML5 Examples with Tutorials

Copyright © 2015 Seven Thunder Software. All Rights Reserved.