SVG Rectangle: Beginner's Guide

Learn to create and add an SVG rectangle to a Web page. See the SVG Rectangle Markup below or the SVG for Beginners Tutorial.

SVG Assign Markup

Assign SVG to Image src Property

SVG Rectangle

SVG Rectangle Markup

Understand the basics for an easy transition to applying other shapes and fills with SVG. Place the following markup inside a Web page.

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

Markup <svg> tells the browser to interpret the following lines as an SVG graphic. Markup rect declares a rectangle. Markup x=4% declares the rectangle's X coordinate. Markup y="4%" declares the rectangle's Y coordinate. Markup fill="#3FA9F5" declares the rectangle's inner color. Markup stroke="#0000FF" declares the color of the rectangle's border. Markup stroke-width="4%" declares the width of the rectangle's border. Markup width="92%" declares the rectangle's width as 92% of the available width. Markup height="50%" declares the rectangle's height as 50% of the available height. Markup </svg> tells the browser to end interpreting display of an SVG graphic.

SVG as Image Source

The SVG markup exists within file rectangle.svg. Save the markup displayed above within file rectangle.svg. Apply rectangle.svg to the src property of an HTML5 img element as follows

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

More SVG & HTML5 Examples with Tutorials

Copyright © 2015 Seven Thunder Software. All Rights Reserved.