SVG Rectangle: Beginner's Guide

Learn to Use SVG in a Web Page

HTML5 For Web Designers and Developers

Rectangle Example What is SVG? Create SVG Graphics SVG Rectangle 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 graphics, with optional effects and animation. For complex images use bitmap graphics.

What is SVG?

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

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 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 or indices. Limited indexed palettes allow 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 with SVG using the image tag.

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.

You can use free text editors or expensive graphics editing software. The free Eclipse IDE works great for simple SVG graphics. Type in the appropriate tags, attributes, and values. More expensive options include vector graphic software applications, 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 Rectangle 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 Outlined Rectangle 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>

SVG Rectangle Attributes & Values

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.

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 text or vector editing software, such as Eclipse or Adobe Illustrator. Prepare markup which declares graphical tags, properties, and values. Save the file with the SVG extension. For example file, rectangle.svg, might contain the SVG outlined rectangle markup. 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 displaying bitmap graphics, HTML, or 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 removes portions from one or more edges of the graphic. 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 Examples.

More SVG Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.