SVG

Page 7

Outlined Circle, Rectangle & Colored Text

Introduction Examples SVG Markup Circle Markup Colored Letters Markup Rectangle Markup Summary

SVG Filled Circle

SVG Text

SVG As Image src Property

The following rectangle applies to an HTML img element's src attribute as, src="rectangle.svg".

Introduction

SVG examples on this page include a blue circle with one percent width red outline, text with different colors per character and a rectangle with four percent green-blue outline. The rectangle's applied to an image element.

SVG Markup

Circle Markup

SVG markup for the circle filled with blue and outlined with red, follows

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

<circle 
cx="50%" 
cy="50%" 
r="18%" 
stroke="red" 
stroke-width="1%" 
fill="blue" 
/>
	
</svg>

Colored Letters Markup

Markup for the colorful text 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>

Rectangle Markup

SVG for a rectangle filled with blue and outlined with blue-green, follows. The markup was saved to a file caled rectangle.svg and applied to the value of an image src attribute.

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

Summary

SVG examples on this page included a blue circle with one percent width red outline, text with different colors per character and a rectangle with four percent green-blue outline. The rectangle's applied to an image element.

You may download or view the SVG Text and SVG Rectangle. Notice the images scale up and down with no loss in quality.

SVG Illustration

Create a range of Scaleable Vector Graphics (SVG) with Adobe Illustrator, HTML or plain text files. The SVG format proves ideal for lightweight, clean, crisp images that never lose their luster.

SVG images export as text files allowing designers and artists to modify properties, within the file, such as fill, background color, gradients and scaling.

Apply JavaScript and CSS3 to modify properties interactively or automatically. Animate, or respond to user interaction, to change a range of properties including color, opacity, location, scale, gradation and more.

SVG

◄Page 7►