1 / 15

SVG & Inkscape

Student Talk: Erica Weiss DIG 4104c Spring 2014. SVG & Inkscape. 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!

sezja
Download Presentation

SVG & Inkscape

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Student Talk: Erica Weiss DIG 4104c Spring 2014 SVG & Inkscape

  2. 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

  3. 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

  4. Disadvantages of using SVG • Slow rendering if complex • Not suited for game applications • Browser support

  5. Disadvantages of using SVG

  6. How do you use them? • Inline • <svg> • Embedded in HTML • <img> • <embed> • <object> • <iframe> • CSS Backgrounds

  7. SVG examples http://www.sagehill.net/docbookxsl/images/circles.png

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

  9. SVG examples http://castillone.deviantart.com/art/dance-404399198

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

  11. Inkscape • Open-Source Vector Graphics editor • SVG is the native format • Cross-Platform compatible • Free

  12. 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.

  13. My Questions 2. Inkscape Tools: Describe a feature that the ‘Select Node Tool’ is capable of.

  14. My Questions 3. When would it be a bad idea to use an SVG as your image format?

  15. Resources http://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 …………………………….

More Related