SlideShare a Scribd company logo

SVG - Scalable Vector Graphic

•Download as PPTX, PDF•
•
A
Akila Iroshan

Scalable Vector Graphics (SVG) is an open standard, XML-based vector image format for two-dimensional graphics.

Related slideshows

HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
CSS Animations & Transitions
CSS Animations & TransitionsCSS Animations & Transitions
CSS Animations & Transitions
 
1 of 34
SVG (Scalable Vector Graphics ) AKILA IROSHAN
Outline What is SVG Why use SVG ? Images vs SVG Tools to create SVG How to add SVG to web page Graphical components of SVG Demo Canvas vs SVG Use Cases
What is SVG? SVG stands for Scalable Vector Graphics
SVG… SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG is a open standard developed by W3C recommendation SVG graphics do NOT lose any quality if they are zoomed or resized Access to the SVG elements trough the DOM Retained mode : object tree is kept in memory Elements and attributes in SVG files can be animated
SVG… Filename extension : .svg, .svgz Internet media type : image/svg+xml Type code : "svg ", "svgz" Uniform Type Identifier : public.svg-image UTI conforms to : public.image and public.xml Developed by : W3C Initial release : 4 September 2001 Type of format : Vector image format Extended from : XML
SVG on the web Google announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in HTML, and that users would begin to see such content listed among their search results. It was announced on 8 December 2010 that Google Image Search would also begin indexing SVG files .On 28 January 2011, it was discovered that Google was allowing Image Search results to be restricted exclusively to SVG files.
Images vs SVG In the picture, scaling the bitmap reveals the dots while scaling the vector image preserves the shapes. The Raster image is composed of a fixed set of dots, while the vector image is composed of a fixed set of shapes.
Images vs SVG Advantages of using SVG over other image formats (like JPEG and GIF) are: SVG images can be created and edited with any text editor SVG images can be searched, indexed, scripted, and compressed SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoom able (and the image can be zoomed without degradation)
Why use SVG ? SVG is text-based Resolution Independent Smaller File Size Reducing HTTP Request Styling and Scripting Can be animated and Edited SVG is XML and works within other language formats
Tools to create SVG Microsoft Visio Export as SVG Adobe Illustrator Save as SVG Inkscape Free Open source software
How to add SVG to web page  Using an <object> Tag <object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>  Using an <embed> Tag <embed type="image/svg+xml" src="image.svg" />  Within an <iframe> <iframe src="image.svg">Your browser does not support iframes</iframe>  Using an <img> Tag <img src="image.svg" />
How to add SVG to web page  Inline SVG XML Embedded into Html 5 page <html><body> <svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50" font-size="30">My SVG</text> </svg> </body></html>  Using a CSS background image #myelement { background-image: url(image.svg);}
Graphical components of SVG Shapes ◦ Rectangle <rect> ◦ Circle <circle> ◦ Ellipse <ellipse> ◦ Line <line> ◦ Polyline <polyline> ◦ Polygon <polygon> ◦ Path <path> Images <image> Text <text>
SVG Rectangle - <rect> The <rect> element is used to create a rectangle and variations of a rectangle shape: <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,255,256);stroke-width:3; stroke:rgb(0,0,0)"> Sorry, your browser does not support inline SVG. </svg>
Code explanation: The width and height attributes of the <rect> element define the height and the width of the rectangle The style attribute is used to define CSS properties for the rectangle The CSS fill property defines the fill color of the rectangle The CSS stroke-width property defines the width of the border of the rectangle The CSS stroke property defines the color of the border of the rectangle
SVG <circle> The <circle> element is used to create a circle: <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /> Sorry, your browser does not support inline SVG. </svg>
SVG <circle> Code explanation: The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) The r attribute defines the radius of the circle
SVG Ellipse - <ellipse> The <ellipse> element is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:
SVG Ellipse - <ellipse> <svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple; stroke-width:2" /> </svg> The cx attribute defines the x coordinate of the center of the ellipse The cy attribute defines the y coordinate of the center of the ellipse The rx attribute defines the horizontal radius The ry attribute defines the vertical radius
SVG <line> The <line> element is used to create a line: <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> Sorry, your browser does not support inline SVG. </svg>
Code explanation: The x1 attribute defines the start of the line on the x-axis The y1 attribute defines the start of the line on the y-axis The x2 attribute defines the end of the line on the x-axis The y2 attribute defines the end of the line on the y-axis
SVG <polygon> Polygon comes from Greek. "Poly" means "many" and "gon" means "angle". The <polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
SVG <polygon> <svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> Sorry, your browser does not support inline SVG. </svg>
SVG <polygon> Example 2 <svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple; stroke-width:1" /> </svg>
SVG <polygon> Example 3 <svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple; stroke-width:1" /> </svg>
SVG <polygon> Example 4 Change the fill-rule property to "evenodd": <svg height="210" width="500"> <polygon points="100,10 40,180 190,60 10,60 160,180��� style="fill:lime; stroke:purple; stroke-width:5;fill-rule:evenodd;" /> </svg>
SVG <polyline> The <polyline> element is used to create any shape that consists of only straight lines: <svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180“ style="fill:none; stroke:black; stroke-width:3" /> </svg>
SVG <polyline> Example 2 <svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160“ style="fill:white; stroke:red;stroke-width:4" /> </svg>
Demo
Canvas vs SVG Canvas SVG Abstraction Pixel based (dynamic bitmap) Shape based Elements Single HTML element Multiple graphical elements which become part of the Document Object Model (DOM) Driver Modified through Script only Modified through Script and CSS Event Model User Interaction is granular (x,y) User Interaction is abstracted (rect, path) Performance Performance is better with smaller surface and/or larger number of objects Performance is better with smaller number of objects and/or larger surface.
Performance Comparison
Use Cases Graph ◦ Styling and Transitions Road Map Complex Geometric UI elements Logos ◦ scaling on the fly Simple games ◦ Less animation and more information display
References http://www.w3schools.com/svg/default.asp http://www.sitepoint.com/add-svg-to-web-page/ https://css-tricks.com/svg-shape-morphing-works/ https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/
Thank You

More Related Content

SVG - Scalable Vector Graphic

  • 1. SVG (Scalable Vector Graphics ) AKILA IROSHAN
  • 2. Outline What is SVG Why use SVG ? Images vs SVG Tools to create SVG How to add SVG to web page Graphical components of SVG Demo Canvas vs SVG Use Cases
  • 3. What is SVG? SVG stands for Scalable Vector Graphics
  • 4. SVG… SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG is a open standard developed by W3C recommendation SVG graphics do NOT lose any quality if they are zoomed or resized Access to the SVG elements trough the DOM Retained mode : object tree is kept in memory Elements and attributes in SVG files can be animated
  • 5. SVG… Filename extension : .svg, .svgz Internet media type : image/svg+xml Type code : "svg ", "svgz" Uniform Type Identifier : public.svg-image UTI conforms to : public.image and public.xml Developed by : W3C Initial release : 4 September 2001 Type of format : Vector image format Extended from : XML
  • 6. SVG on the web Google announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in HTML, and that users would begin to see such content listed among their search results. It was announced on 8 December 2010 that Google Image Search would also begin indexing SVG files .On 28 January 2011, it was discovered that Google was allowing Image Search results to be restricted exclusively to SVG files.
  • 7. Images vs SVG In the picture, scaling the bitmap reveals the dots while scaling the vector image preserves the shapes. The Raster image is composed of a fixed set of dots, while the vector image is composed of a fixed set of shapes.
  • 8. Images vs SVG Advantages of using SVG over other image formats (like JPEG and GIF) are: SVG images can be created and edited with any text editor SVG images can be searched, indexed, scripted, and compressed SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoom able (and the image can be zoomed without degradation)
  • 9. Why use SVG ? SVG is text-based Resolution Independent Smaller File Size Reducing HTTP Request Styling and Scripting Can be animated and Edited SVG is XML and works within other language formats
  • 10. Tools to create SVG Microsoft Visio Export as SVG Adobe Illustrator Save as SVG Inkscape Free Open source software
  • 11. How to add SVG to web page  Using an <object> Tag <object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>  Using an <embed> Tag <embed type="image/svg+xml" src="image.svg" />  Within an <iframe> <iframe src="image.svg">Your browser does not support iframes</iframe>  Using an <img> Tag <img src="image.svg" />
  • 12. How to add SVG to web page  Inline SVG XML Embedded into Html 5 page <html><body> <svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50" font-size="30">My SVG</text> </svg> </body></html>  Using a CSS background image #myelement { background-image: url(image.svg);}
  • 13. Graphical components of SVG Shapes ◦ Rectangle <rect> ◦ Circle <circle> ◦ Ellipse <ellipse> ◦ Line <line> ◦ Polyline <polyline> ◦ Polygon <polygon> ◦ Path <path> Images <image> Text <text>
  • 14. SVG Rectangle - <rect> The <rect> element is used to create a rectangle and variations of a rectangle shape: <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,255,256);stroke-width:3; stroke:rgb(0,0,0)"> Sorry, your browser does not support inline SVG. </svg>
  • 15. Code explanation: The width and height attributes of the <rect> element define the height and the width of the rectangle The style attribute is used to define CSS properties for the rectangle The CSS fill property defines the fill color of the rectangle The CSS stroke-width property defines the width of the border of the rectangle The CSS stroke property defines the color of the border of the rectangle
  • 16. SVG <circle> The <circle> element is used to create a circle: <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /> Sorry, your browser does not support inline SVG. </svg>
  • 17. SVG <circle> Code explanation: The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) The r attribute defines the radius of the circle
  • 18. SVG Ellipse - <ellipse> The <ellipse> element is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:
  • 19. SVG Ellipse - <ellipse> <svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple; stroke-width:2" /> </svg> The cx attribute defines the x coordinate of the center of the ellipse The cy attribute defines the y coordinate of the center of the ellipse The rx attribute defines the horizontal radius The ry attribute defines the vertical radius
  • 20. SVG <line> The <line> element is used to create a line: <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> Sorry, your browser does not support inline SVG. </svg>
  • 21. Code explanation: The x1 attribute defines the start of the line on the x-axis The y1 attribute defines the start of the line on the y-axis The x2 attribute defines the end of the line on the x-axis The y2 attribute defines the end of the line on the y-axis
  • 22. SVG <polygon> Polygon comes from Greek. "Poly" means "many" and "gon" means "angle". The <polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
  • 23. SVG <polygon> <svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> Sorry, your browser does not support inline SVG. </svg>
  • 24. SVG <polygon> Example 2 <svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple; stroke-width:1" /> </svg>
  • 25. SVG <polygon> Example 3 <svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple; stroke-width:1" /> </svg>
  • 26. SVG <polygon> Example 4 Change the fill-rule property to "evenodd": <svg height="210" width="500"> <polygon points="100,10 40,180 190,60 10,60 160,180“ style="fill:lime; stroke:purple; stroke-width:5;fill-rule:evenodd;" /> </svg>
  • 27. SVG <polyline> The <polyline> element is used to create any shape that consists of only straight lines: <svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180“ style="fill:none; stroke:black; stroke-width:3" /> </svg>
  • 28. SVG <polyline> Example 2 <svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160“ style="fill:white; stroke:red;stroke-width:4" /> </svg>
  • 29. Demo
  • 30. Canvas vs SVG Canvas SVG Abstraction Pixel based (dynamic bitmap) Shape based Elements Single HTML element Multiple graphical elements which become part of the Document Object Model (DOM) Driver Modified through Script only Modified through Script and CSS Event Model User Interaction is granular (x,y) User Interaction is abstracted (rect, path) Performance Performance is better with smaller surface and/or larger number of objects Performance is better with smaller number of objects and/or larger surface.
  • 32. Use Cases Graph ◦ Styling and Transitions Road Map Complex Geometric UI elements Logos ◦ scaling on the fly Simple games ◦ Less animation and more information display