SVG & INKSCAPEStudent Talk: Erica WeissDIG 4104c Spring 2014

Scalable Vector GraphicsXML Based Vector Image2D ImagesW3C Standard

◦SVG 1.1◦SVG Tiny 1.2

Good for logos, illustrations and images that require high scalability

Advantages of using SVGThey are interactive!Every element and attribute can be

animated Created or edited with a text editorSearched, indexed, scripted and

compressedScalablePrinted with high quality

Disadvantages of using SVGSlow rendering if complexNot suited for game applicationsBrowser support

Disadvantages of using SVG

How do you use them?Inline

◦<svg>Embedded in HTML

◦<img>◦<embed>◦<object>◦<iframe>

CSS Backgrounds

SVG examples

http://www.sagehill.net/docbookxsl/images/circles.png

SVG examples

http://lds-jedi.deviantart.com/art/WinterSky-Vector-60966106

SVG examples

http://castillone.deviantart.com/art/dance-404399198

SVG examples

http://cid-moreira12.deviantart.com/art/Quorra-TRON-Legacy-195816382

InkscapeOpen-Source Vector Graphics

editorSVG is the native formatCross-Platform compatible Free

My Questions 1. A company cannot decide if

they want to incorporate an SVG or use another image format for their logo. Give them four reasons why an SVG would benefit their website and usability.

My Questions 2. Inkscape Tools:

Describe a feature that the ‘Select Node Tool’ is capable of.

My Questions 3. When would it be a bad idea to

use an SVG as your image format?

Resourceshttp://www.inkscape.org/en/http://caniuse.com/svghttps://en.wikipedia.org/wiki/Svghttp://www.w3schools.com/svg/default.asphttp://www.w3.org/Graphics/SVG/http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTMLhttp://www.youtube.com/watch?v=IU8UI5VnEQEhttp://www.youtube.com/watch?v=eM8_xRCZvEohttp://tutorials.jenkov.com/svg/g-element.html

Inkscape …………………………………..Browser Diagram……………………….Wikipedia…………………………………..W3Schools SVG tutorial……………..

W3C SCG Working Group……………Embedding SVG in HTML……………

Shiny Button Tutorial………………….

Inkscape’s Basic Tools Tutorial……

SVG elements …………………………….