1. SVG and the Web
How to make use of SVG images and text to
improve performance and look.

2. SVG offers a truly resolution-independent technique
for presenting graphics on the Web.
Scalable Vector Graphics
Open Source Code
Coded in XML
Based on math equations and points
SVG is a W3C recommendation
Has been around since 2001
Main competitor to Flash
SVG or bust!

3. Examples of SVG Graphics Pg.1

4. Examples of SVG Graphics Pg.2

5. Examples of SVG Graphics Pg.3

6. Advantages of SVG Graphics
SVG images can be created and edited with any text editor.
SVG images can be searched, indexed, scripted, and compressed.
SVG images are scalable and zoomable.
SVG is an open standard.
SVG is ideal for creating generated images, graphs and diagrams.
Every element and every attribute in SVG files can be animated.

7. SVG - Simple Example
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
The resulting SVG image is shown:

8. SVG - Simple Example in Browser
<img src="circle.svg">
OR
<svg class=”myCSSClass”>
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill:#0000ff"/>
</svg>

9. SVG - Simple Example in Browser (cont.)
SVG as background image in a DIV tag:
<div class=”myCSSClass”>
</div>
With
.myCSSClass {
background: url(“circle.svg”);
}

10. SVG - Simple Example in Browser (cont.)
Wrap SVG image in a anchor tag:
<a href=”http://google.com” >
<svg class=”myCSSClass”>
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill:#0000ff"/>
</svg>
</a>

11. SVG - Simple Example in Browser (cont.)
SVG image before hover:
SVG image after hover:
.myCSSClass:hover {
fill:#00ff00;
}

12. SVG - Simple Example in Inkscape

13. SVG - Simple Example in Inkscape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="800"
height="800"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"

14. SVG - Simple Example in Inkscape
sodipodi:docname="square-example1.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="191.65731"
inkscape:cy="439.32319"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"

15. SVG - Simple Example in Inkscape
showborder="false"
inkscape:window-width="1920"
inkscape:window-height="1003"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>

16. SVG - Simple Example in Inkscape
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-252.36217)">
<rect
style="fill:#0000ff;fill-opacity:1;stroke:#ff0000;stroke-width:4;stroke-linecap:butt;stroke-
linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2985"
width="489.92398"
height="489.92398"
x="62.629459"
y="79.761238"

17. SVG - Simple Example in Inkscape
transform="translate(0,252.36217)" />
</g>
</svg>
**************************end Inkscape SVG file*************************

18. SVG - Simple Example in Inkscape
SVG file after clean up:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="800"
height="800"
<g
transform="translate(0,-252.36217)">
<rect
style="fill:#0000ff;fill-opacity:1;stroke:#ff0000;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-
miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2985"
width="489.92398"
height="489.92398"
x="62.629459"
y="79.761238"
transform="translate(0,252.36217)" />
</g>
</svg>

19. SVG - Further Reading
SVG Tutorial by By Jakob Jenkov
http://tutorials.jenkov.com/svg/index.html
w3schools.com -- SVG Tutorial
http://www.w3schools.com/svg/
Smashing Magazine - Resolution Independence With SVG
http://www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/