Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
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...
SVG…
Filename extension : .svg, .svgz
Internet media type : image/svg+xml
Type code : "svg ", "svgz"
Uniform Type Identifi...
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 st...
Images vs SVG
In the picture, scaling the bitmap reveals the dots while scaling the vector
image preserves the shapes.
The...
Images vs SVG
Advantages of using SVG over other image formats (like JPEG and GIF)
are:
SVG images can be created and edit...
Why use SVG ?
SVG is text-based
Resolution Independent
Smaller File Size
Reducing HTTP Request
Styling and Scripting
Can b...
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
sup...
How to add SVG to web page
 Inline SVG XML Embedded into Html 5 page
<html><body>
<svg width="300px" height="300px" xmlns...
Graphical components of SVG
Shapes
◦ Rectangle <rect>
◦ Circle <circle>
◦ Ellipse <ellipse>
◦ Line <line>
◦ Polyline <pol...
SVG Rectangle - <rect>
The <rect> element is used to create a rectangle and variations of a
rectangle shape:
<svg width="4...
Code explanation:
The width and height attributes of the <rect> element define the height
and the width of the rectangle
T...
SVG <circle>
The <circle> element is used to create a circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40...
SVG <circle>
Code explanation:
The cx and cy attributes define the x and y coordinates of the center of
the circle. If cx ...
SVG Ellipse - <ellipse>
The <ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The...
SVG Ellipse - <ellipse>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;strok...
SVG <line>
The <line> element is used to create a line:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="20...
Code explanation:
The x1 attribute defines the start of the line on the x-axis
The y1 attribute defines the start of the l...
SVG <polygon>
Polygon comes from Greek. "Poly" means "many" and "gon" means
"angle".
The <polygon> element is used to crea...
SVG <polygon>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;strok...
SVG <polygon> Example 2
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;
...
SVG <polygon> Example 3
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;
...
SVG <polygon> Example 4
Change the fill-rule property to "evenodd":
<svg height="210" width="500">
<polygon points="100,10...
SVG <polyline>
The <polyline> element is used to create any shape that consists of only
straight lines:
<svg height="200" ...
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“ s...
Demo
Canvas vs SVG
Canvas SVG
Abstraction
Pixel based (dynamic
bitmap)
Shape based
Elements
Single HTML element Multiple graphi...
Performance Comparison
Use Cases
Graph
◦ Styling and Transitions
Road Map
Complex Geometric UI elements
Logos
◦ scaling on the fly
Simple games
◦...
References
http://www.w3schools.com/svg/default.asp
http://www.sitepoint.com/add-svg-to-web-page/
https://css-tricks.com/s...
Thank You
Nächste SlideShare
Wird geladen in …5
×

SVG - Scalable Vector Graphic

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

SVG - Scalable Vector Graphic

  1. 1. SVG (Scalable Vector Graphics ) AKILA IROSHAN
  2. 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. 3. What is SVG? SVG stands for Scalable Vector Graphics
  4. 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. 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. 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. 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. 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. 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. 10. Tools to create SVG Microsoft Visio Export as SVG Adobe Illustrator Save as SVG Inkscape Free Open source software
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. Demo
  30. 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.
  31. 31. Performance Comparison
  32. 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
  33. 33. 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/
  34. 34. Thank You

×