svg & inkscape student talk: erica weiss dig 4104c spring 2014
TRANSCRIPT
SVG & INKSCAPE
Student 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/svg
https://en.wikipedia.org/wiki/Svg
http://www.w3schools.com/svg/default.asp
http://www.w3.org/Graphics/SVG/
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
http://www.youtube.com/watch?v=IU8UI5VnEQE
http://www.youtube.com/watch?v=eM8_xRCZvEo
http://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 …………………………….