SVG Basics

Objective: Understand that SVG is an XML vocabulary and learn the basic SVG setup properties.

1.1 The SVG Learning Challenge

To learn how to hand-craft SVG you have to know the syntax and semantics of the SVG XML. XML is constructed like this:

• A named element has an opening and closing tag (green)
• If an element doesn't have content it can be self closing with /> (second line).
• A named element can have many attributes (blue) inside the opening tag.
• Each attribute has a controlled list of values and value types (red).
• Attribute values may be controlled words or numbers or number patterns.
• The basic SVG element is a good example of multiple attributes and different value types.

In this example the SVG ELEMENT has three ATTRIBUTES : viewBox="" width="" height="" . Each of these attributes has their value patterns.

The easiest way to learn SVG is to LEARN BY DOING. 

That means using the elements, attributes and values over and over again (memorization)  while making something real and of value.

SVG is different from most other XML vocabularies in that it has defined: 

1. Construction attributes
2. Layout attributes and
3. Styling attributes.

The elements are relatively straight-forward to learn. The required construction metric attributes for each element are more challenging to memorize.

Practice makes perfect but remember Cheat Sheets are great. This is not an exam. The Infogrid Pacific SVG Cheat Sheets are available below as printable PDFs.

1.2 SVG is XML - Beware

Remember: SVG is an XML Markup Language

SVG is XML so you can't go sloppy on the tagging. You have to remember the basic rules of XML editing:

1. If you open a tag, close a tag.<tag1>...</tag1> or make sure it is self-closed. <tag1 />
2. No overlapping tags.
   Correct: tag2 opens and closes inside tag1
      <tag1>...
            <tag2>...</tag2>...
        <tag1>
   
   Very wrong: tag2 opens inside tag1 and closes outside tag1.
       <tag1>...
           <tag2>...
       </tag1>...
            </tag2>
3. Attributes MUST HAVE an equal sign and opening and closing quotes. Eg: attribute="value". A missing quote will completely muck-up your SVG. 
4. Elements MUST be used ONLY with allowed and correct, attributes.
5. Attributes MUST be used ONLY with defined and allowed values.
6. Don't make stuff up.

HTML5 released us from a lot of the XML "exact" tagging rules but SVG doesn't. It is very fussy stuff. One little quote-mark error or closing element error and you will be instantly in XML hell! Be ready for it.

For this reason cut and paste (and attention) is a very good thing.

NOTE: This version of the practice editor does not do any checks on the SVG except  nested layout. We will look at introducing syntax checks in a later version. However these are tutorial pages and not production tools so you having to keep focus on SVG XML syntax and  well-formedness is a free learning bonus!

1.3 The SVG Container

This is a getting started basics. Here we are getting started with the absolute minimum requirement.

This is the absolute minimum SVG you need in HTML5. You can then get coding.

<svg>
<!-- Your SVG code goes here -->
</svg>

This will work but there are practical reasons why this is a little light. So the standard blocks in this tutorial use the following minimum SVG block. (We are not addressing external SVG files at the moment).

<svg viewBox="0, 0, 400, 400" width="400" height="400">
<!-- Your SVG code goes here -->
</svg>

UNITS: All units are pixels by default if there is no unit applied. Units that can be used are the same as CSS: em, ex, px, pt, pc, cm, mm, in.

The Infogrid Pacific SVG Primitives use a standard drawing viewBox of 400px X 400px so we are using that as our standard tutorial block. Each of the interactive editable SVG boxes will have the SVG Primitives box sizing by default. You will learn how to change that.

<svg> </svg> The SVG opening and closing elements defines the container any specific SVG drawing.

viewBox="0, 0, 400, 400" This sets the view of the drawing. In this case the view matches the image size. The four numbers give the position of the viewBox. In order these are: "x-start position, y-start position, box-width, box-height". It is optional, but very useful.

width="400" This sets the width of the drawing on the page in pixels. (It is optional). 

height="400" This sets the height of the drawing on the page in pixels. (It is optional).

There is a circle and lines in the SVG at this stage. Ignore these are we are exploring the SVG size and view setup properties here.

SVG Editor

1.4  Exercises

1. Open the editor and remove the svg element width and height attributes and values. Click Preview then Apply . Note what happens to the image. There is no internal SVG image size control.
2. Click Reset once (wait a few seconds and the interface will reset).
3. Open the editor and remove the svg element viewBox attributes and values. Click Preview then Apply.  Nothing changes in the image.
4. Click Reset once (wait a few seconds and the interface will reset).
5. Open the editor and change the svg element viewBox values to viewBox="200, 200, 400, 400".
6. Click Preview. (NOTE. You don't have to click Apply, but you can if you want to. Preview is very useful for checking your changes before saving). 
7. Click Source and change the viewBox values to viewBox="50, 50, 250, 250".
8. Click Preview again. You are now looking at the top left area of the circle. The drawing has not changed size but you have "zoomed" into a part of the drawing using viewBox.
9. Click Cancel to return to the original SVG image if you haven't clicked Apply.
10. Experiment with the viewBox by yourself to understand how you can control which part of a drawing can be displayed. Try the following viewPort numbers.
    
    viewBox="200, 0, 200, 200" (top-right corner)
    viewBox="0, 200, 200, 200" (bottom-left corner)
    viewBox="-200, -200, 800, 800" (zoom out to half size. NOTE: You can use negative numbers)
    viewBox="-2600, -2600, 5600, 5600" (zoom way out. There is no limit to the size of the numbers you use).
11. Experiment with the default viewbox and change the image width and height independently. Try the following values.
    
    width="200" height="400"      
    width="400" height="200"  
    width="50" height="400"    
    width="800" height="400"  
12. Note how the viewBox will always remain inside the height and width statements.

1.5 In this lesson

You learned the basic HTML5 SVG setup requirements. 

Understood the three main SVG attributes viewBox, width and height.

Learned how changing the values of those SVG attributes gives a different presentation of the image in the HTML browser context.