INFO 424 SCHEDULE

SVG

what to know

What is svg?

SVG stands for Scalable Vector Graphics. It is a text-based representation of graphics which uses an XML format.

For future reference, the definitive guide to SVG is here: http://www.w3schools.com/svg/default.asp

Wikipedia has a nice article on SVG if you want to learn more

Browser support of SVG

All modern browsers support SVG with the exception of Internet Explorer version 8 which, as of August, 2012, is used for 13.6% of page views worldwide and 14.5% of page views in the US.

Sources:

Should you be able to write SVG code?

No, don't bother - have Illustrator do it for you. You'll learn how in the exercise below.

Should you be able to read SVG code?

Probably just enough to recognize what's going on. The exercise below will help you with that.

SVG Exercise

Step 1: Modify SVG


To get familiar with the elements of SVG, do the following:

a. Download this svg file. Save a copy as "modifiedSVG.svg"

b. Open it in Illustrator or a browser to see what it looks like. You should see this:

c. Now open this file in a text editor or DreamWeaver so you can see and modify the code.

d. The first rectangle is 88 pixels wide and its x position is 114.5, change it to be 120 pixels wide and change it's x position to 98

e. Change the corners of the rounded rectangles to be 40 pixels rather than 20

f. Change the circle's radius from 50 to 20 and give it a gray fill (#999999)

g. Change the ellipse's vertical (y) radius from 30 to 60

h. Change the end-point of the line to x=270 and y=90

i. Change the second point in the polyline to 300,65

j. Add a fourth point to the polygon - put it in between the first and second points at 325,185

Paths can get incredibly complex incredibly fast, so mostly you just want to know what they are and that they use letters to mean things (here's a list FYI, no need to memorize it):

k. Change the "C" (curveto) to an "L" (lineto) in the path to see what happens.

Your result should look like this:

 

modified SVG

BEFORE and AFTER:

modified SVG

l. Save this file to turn in at the end

Step 2: Create SVG

a. Create a new Illustrator file called "IllustratorSVG.svg"

b. Draw a circle and a rectangle and then a shape with curves.

c. Go to File -> SaveAs and choose SVG as the file type:

save as svg

d. Open this file with a text editor.

e. Look for the rectangle, circle and path elements. They will probably have some styliing and generally look more complex than the simple ones from the file you downloaded. (You don't have to do anything to it - the point of this step is just to see what svg output from Illustrator looks like). In the next lab, you'll be working with an svg file saved from Illustrator.

Embedding svg

The image below is from Wikimedia Commons. It is a map of Andorra.

a. View this the source code for this page (in most browsers, you can right click and get an option to view the source). Scroll to the bottom to see that the SVG code is just part of the code for this page - it's contained within <svg> </svg> tags.

Final Products: modifiedSVG.svg, IllustratorSVG.svg