Your SlideShare is downloading. ×
Standard svg
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Standard svg

362

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
362
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. StandardSVG@jesusnoseq | jesusnoseq.com
  • 2. SVG - ¿What is it?Scalable Vector GraphicsIs an XML-based vector image formatfor two-dimensional graphics.
  • 3. SVG - The standardThe SVG specification is an open standarddeveloped by the World Wide Web Consortium(W3C)W3C Recommendation 16 August 2011http://www.w3.org/TR/SVG11/
  • 4. SVG - A little of History● The W3C develops the standard since 1999.● SVG 1.0 became a W3C Recommendationon 4 September 2001.● SVG 1.1 became a W3C Recommendationon 14 January 2003.● SVG Tiny 1.2 became a W3CRecommendation on 22 December 2008.● SVG 2.0 is currently a draft. It is scheduledas recommendation for August 2014.(changes)
  • 5. SVG - What can i do?● Pathshttp://www.w3.org/TR/SVG11/paths.html● Basic shapes (polygons, circles, ellipses, rectangles and round-cornered rectangles)http://www.w3.org/TR/SVG11/shapes.html● Animacioneshttp://www.w3.org/TR/SVG11/animate.htmlhttp://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatemotion3● Texthttp://www.w3.org/TR/SVG11/text.html● Fontshttp://www.w3.org/TR/SVG11/fonts.html● Paintinghttp://www.w3.org/TR/SVG11/painting.html● Filter effectshttp://www.w3.org/TR/SVG11/filters.html
  • 6. SVG - What can i do?● Colors, Gradients and patternshttp://www.w3.org/TR/SVG11/pservers.html● Clipping, masking and compositinghttp://www.w3.org/TR/SVG11/masking.html● Interactivityhttp://www.w3.org/TR/SVG11/interact.html● Linkinghttp://www.w3.org/TR/SVG11/linking.html● Metadatahttp://www.w3.org/TR/SVG11/metadata.html● Scriptshttp://www.w3.org/TR/SVG11/escript.html● Can contain raster graphics (JPEG or PNG)http://www.w3.org/TR/SVG/conform.html
  • 7. SVG - Is a XML file<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"height="100%" viewBox="0 0 100 100"><title>SVG Logo</title><a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG WorkingGroup home page"><rect id="background" fill="#FF9900" width="100" height="100" rx="4" ry="4"/><rect id="top-left" fill="#FFB13B" width="50" height="50" rx="4" ry="4"/><rect id="bottom-right" x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/><g id="circles" fill="#FF9900"><circle id="n" cx="50" cy="18.4" r="18.4"/><circle id="ne" cx="72.4" cy="27.6" r="18.4"/><circle id="e" cx="81.6" cy="50" r="18.4"/><circle id="se" cx="72.4" cy="72.4" r="18.4"/><circle id="s" cx="50" cy="81.6" r="18.4"/><circle id="sw" cx="27.6" cy="72.4" r="18.4"/><circle id="w" cx="18.4" cy="50" r="18.4"/><circle id="nw" cx="27.6" cy="27.6" r="18.4"/></g>...
  • 8. SVG - Integration● The standard way of integrating images: <img>● Embedded with HTMLhttp://www.w3schools.com/svg/svg_examples.aspGoogle index SVG content.<html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg></body></html>
  • 9. SVG - Who support svg?● Vector graphics editor● Web browsers http://caniuse.com/svg○ And some mobile web browsers● LibreOffice, Scribus, gnuplot, GIMP,Blender...● Libraries (librsvg, Batik...)● Game Engines (andengine, canvace.js, libGDX, Blender)
  • 10. SVG - Editors● InkScape● Adobe Illustrator● CorelDRAW● And morehttp://en.wikipedia.org/wiki/List_of_vector_graphics_editors
  • 11. SVG - Advantages / Disadvantages● Scalable to any sizewithout loss.● Easy to modify.● Vectorrepresentations areoften of much smallerfile size.● Compatibility.● Rendering time.● The same file sizeregardless of the sizewhich is to bedisplayed.
  • 12. SVG - Raster VS Vector images
  • 13. SVG - LinksBibliographyhttp://www.w3.org/Graphics/SVG/http://www.w3.org/TR/2013/WD-SVG2-20130409/http://www.w3.org/TR/SVG11http://www.w3.org/TR/SVGTiny12/http://es.wikipedia.org/wiki/Svghttp://en.wikipedia.org/wiki/Scalable_Vector_Graphicshttp://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVGhttp://es.wikipedia.org/wiki/Wikipedia:Transici%C3%B3n_a_SVGTutorials:http://www.w3schools.com/svg/svg_intro.asphttp://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_overviewhttp://joaclintistgud.wordpress.com/2011/04/14/inkscape-logo-a-logo-2%C2%AA-edicion/SVG image galleries:http://wiki.inkscape.org/wiki/index.php/Galleries

×