SVG & INKSCAPE Student Talk: Erica Weiss DIG 4104c Spring 2014
Scalable Vector Graphics XML Based Vector Image 2D Images W3C Standard ◦ SVG 1.1 ◦ SVG Tiny 1.2 Good for logos, illustrations and images that require high scalability
Advantages of using SVG They are interactive! Every element and attribute can be animated Created or edited with a text editor Searched, indexed, scripted and compressed Scalable Printed with high quality
Disadvantages of using SVG Slow rendering if complex Not suited for game applications Browser support
Disadvantages of using SVG
How do you use them? Inline ◦ Embedded in HTML ◦ CSS Backgrounds
SVG examples
SVG examples
SVG examples
SVG examples
Inkscape Open-Source Vector Graphics editor SVG is the native format Cross-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?
Resources ult.asp /resources/svgprimer.html#SVG_in_ HTML U8UI5VnEQE M8_xRCZvEo 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 …………………………….