SVG is an XML-based vector image format developed as an open standard by the W3C. It allows for scalable two-dimensional graphics and text. The standard was first released in 2001 and can be used for paths, shapes, animation, and interactivity. SVG images are scalable, compatible across browsers, and often smaller file sizes than equivalent raster images. Common uses of SVG include in websites, games, and vector editing programs.
2. SVG - ¿What is it?
Scalable Vector Graphics
Is an XML-based vector image format
for two-dimensional graphics.
3. SVG - The standard
The SVG specification is an open standard
developed by the World Wide Web Consortium
(W3C)
W3C Recommendation 16 August 2011
http://www.w3.org/TR/SVG11/
4. SVG - A little of History
● The W3C develops the standard since 1999.
● SVG 1.0 became a W3C Recommendation
on 4 September 2001.
● SVG 1.1 became a W3C Recommendation
on 14 January 2003.
● SVG Tiny 1.2 became a W3C
Recommendation on 22 December 2008.
● SVG 2.0 is currently a draft. It is scheduled
as recommendation for August 2014.(changes)
5. SVG - What can i do?
● Paths
http://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
● Animaciones
http://www.w3.org/TR/SVG11/animate.html
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatemotion3
● Text
http://www.w3.org/TR/SVG11/text.html
● Fonts
http://www.w3.org/TR/SVG11/fonts.html
● Painting
http://www.w3.org/TR/SVG11/painting.html
● Filter effects
http://www.w3.org/TR/SVG11/filters.html
6. SVG - What can i do?
● Colors, Gradients and patterns
http://www.w3.org/TR/SVG11/pservers.html
● Clipping, masking and compositing
http://www.w3.org/TR/SVG11/masking.html
● Interactivity
http://www.w3.org/TR/SVG11/interact.html
● Linking
http://www.w3.org/TR/SVG11/linking.html
● Metadata
http://www.w3.org/TR/SVG11/metadata.html
● Scripts
http://www.w3.org/TR/SVG11/escript.html
● Can contain raster graphics (JPEG or PNG)
http://www.w3.org/TR/SVG/conform.html
8. SVG - Integration
● The standard way of integrating images: <img>
● Embedded with HTML
http://www.w3schools.com/svg/svg_examples.asp
Google 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 more
http://en.wikipedia.org/wiki/List_of_vector_graphics_editors
11. SVG - Advantages / Disadvantages
● Scalable to any size
without loss.
● Easy to modify.
● Vector
representations are
often of much smaller
file size.
● Compatibility.
● Rendering time.
● The same file size
regardless of the size
which is to be
displayed.