Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

SVG Basics – File Structure

Basic SVG File Structure

SVG documents are written in XML and must be valid and well-formed XML documents in order to be rendered. Proceeding declaring any SVG code must come a document type declaration that points the XML parser to a document which declares the markup for SVG. SVG documents carry the extension “.svg”.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<SVG
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="200px" height="50px"
viewBox="0 0 200 50"
zoomAndPan="disable" >


</SVG>
Code 1. Basic SVG Document

The code listing above shows how to set up the SVG file. The first line declares the file to be XML. The second line is the document type definition, or DTD.

The SVG Element

The third tag is the outermost svg tag and its attributes define how the document is drawn. Below is an explanation of the SVG element and how three of the most important attributes work.

width=”200px” height=”50px”
Code 2. Intrinsic width and height

Since SVG is resolution independent it needs to know how much of the screen it should use to draw to. The above code accomplishes this by stating an intrinsic width and height (ie: the size it takes up on the screen) of the document. If this is omitted then 100% is assumed and it will use up all of the display given to it. When SVG is placed in a webpage this means the “display” is the object/embed tag. Its width and height will be used when there is no width or height attributes with the SVG tag.

viewBox=”0 0 200 50″
Code 3. View Box. (minx, miny, width, height)

The ‘viewBox’ (minx, miny, width, height) states the coordinates that are viewable in the document (ie: the coordinates you will draw to in the document). A viewBox with a width/height ratio different than the document’s width/height ratio will result in scaling, cropping or both. It is easiest to simply be consistent between these settings when you’re designing for a webpage.

Image 1. SVG content embedded into a webpage and the same content on a cell phone.

As shown in the above image, the width and height of the display area used to display a SVG document and the viewbox do not have to match. The preserveAspectRatio attribute of the SVG tag allows you to specify how the graphics stretch and crop to the viewBox.

zoomAndPan=”disable”
Code 4. Disable Zooming and Panning

The default for zoomAndPan is magnify which allows the user to zoom and pan around the file. Adding the above line prevents the user from doing this.

SVG Compression

In order to save bandwidth SVG can be compressed with gzip. Compressed SVG files are supposed to have the extension “.svgz”.

Putting it Together

Adding the lines below to the standard SVG file (See: Code 1) tells the SVG render to draw 3 rectangles and the text “Hello World!”.

<TEXT style=”fill: black; text-anchor: middle” y=”25″ x=”100″>Hello World!</TEXT>

<RECT y=”5″ x=”10″ fill=”blue” height=”20″ width=”20″ />

<RECT y=”10″ x=”20″ fill=”green” height=”20″ width=”160″ opacity=”0.5″ />

<RECT y=”25″ x=”170″ fill=”blue” height=”20″ width=”20″ />

Code 5. Hello World!
Result:

Note the drawing order is the same order in which the elements were declared. To look at the source code of any of the examples on these pages right click on the SVG document and choose the appropriate option.

You might have noticed I referred to the ‘svg’ tag in the example as the outermost. The ‘svg’ tag and its contents is a SVG document fragment and this can be put inside other ‘svg’ tags to create new viewports. More on that later…

Next, we’ll cover the basic vector shapes defined in SVG.

Comments