Presentation Presented By Izzatullah Muhmmad Javed Hafiz Tahir
Presentation Presented By Izzatullah Muhmmad Javed Hafiz Tahir Mumtaz Waheed Ahmed
Scalable Vector Graphics (SVG)
SVG STANDS FOR SCALABLE VECTOR GRAPHICS. SVG DEFINES VECTOR-BASED GRAPHICS IN XML FORMAT.
What you should already know Before you continue, you should have some basic understanding of the following: HTML Basic XML
What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format Every element and every attribute in SVG files can be animated SVG is a W 3 C recommendation SVG integrates with other W 3 C standards such as the DOM and XSL
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 zoomable SVG graphics do NOT lose any quality if they are zoomed or resized SVG is an open standard SVG files are pure XML
Setup the SVG The first step in creating any SVG is to lay down an <svg></svg> element. Anything you want your SVG to display will have to be between these tags. There a few attributes you can use on this element, but we’ll keep things simple and just Use width and height. v Add the following code in the <body> section of your HTML document: <svg width="750" height="500"> </svg>
SVG Shapes SVG has some predefined shape elements that can be used by developers: Rectangle Circle <circle> Ellipse Line <rect> <ellipse> <line> Polyline <polyline> Polygon <polygon> Path <path>
SVG Rectangle - <rect> <svg width="400" height="110"> <rect width="300" height="100" style="fill: rgb(0, 0, 255); stroke-width: 3; stroke: rgb(0, 0, 0)" /> </svg> Rectangle 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
Circle <!DOCTYPE html> <body> <h 1>My first SVG</h 1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" strok e-width="4" fill="yellow" /> </svg> </body> </html> My first SVG
Circle Code explanation An SVG image begins with an <svg> element The width and height attributes of the <svg> element define the width and height of the SVG image The <circle> element is used to draw a circle The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's center is set to (0, 0) The r attribute defines the radius of the circle The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4 px green "border" The fill attribute refers to the color inside the circle. We set the fill color to yellow The closing </svg> tag closes the SVG image
Square <svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill: blue; stroke: pink; stroke-width: 5; fillopacity: 0. 1; stroke-opacity: 0. 9" /> </svg> Square Explanation: • The x attribute defines the left position of the rectangle (e. g. x="50" places the rectangle 50 px from the left margin) • The y attribute defines the top position of the rectangle (e. g. y="20" places the rectangle 20 px from the top margin) • The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1) • The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)
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 height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill: yellow; stroke: purple; stroke-width: 2" /> </svg> • • • Code Explanation 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 - <line> <svg height="210" width="500"> <line x 1="0" y 1="0" x 2="200" y 2="200" style="stroke: rgb(255, 0, 0); strokewidth: 2" /> </svg> • Code explanation: • The x 1 attribute defines the start of the line on the x-axis • The y 1 attribute defines the start of the line on the y-axis • The x 2 attribute defines the end of the line on the x-axis • The y 2 attribute defines the end of the line on the y-axis
SVG Polyline - <polyline> <svg height="200" width="500"> <polyline points="20, 20 40, 25 60, 40 80, 120, 140 200, 180" style="fill: none; stroke: black; stroke-width: 3" /> </svg> Code explanation: The points attribute defines the list of points (pairs of x and y coordinates) required to draw the polyline
SVG Polygon - <polygon> Polygon comes from Greek. "Poly" means "many" and "gon" means "angle“ <svg height="210" width="500"> <polygon points="200, 10 250, 190 160, 210" style="fill: lime; stroke: purple; stroke-width: 1" /> </svg> Code explanation: The points attribute defines the x and y coordinates for each corner of the polygon
Use the <polygon> element to create a star <svg height="210" width="500"> <polygon points="100, 10 40, 198 190, 78 160, 198" style="fill: lime; stroke: purple; stroke-width: 5; fillrule: nonzero; " /> </svg>
SVG <path> The <path> element is used to define a path. The following commands are available for path data: M = moveto H = horizontal lineto C = curveto Q = quadratic Bézier curveto T = smooth quadratic Bézier A = elliptical Arc Z = closepath L = lineto V = vertical lineto S = smooth curveto <svg height="210" width="400"> <path d="M 150 0 L 75 200 L 225 200 Z" /> </svg>
SVG Text - <text> <svg height="30" width="200"> <text x="0" y="15" fill="red">I love SVG!</text> </svg> SVG Text - <Several Lines> <svg height="90" width="200"> <text x="10" y="20" style="fill: red; ">Several lines: <tspan x="10" y="45">First line. </tspan> <tspan x="10" y="70">Second line. </tspan> </text> </svg>
SVG stroke Property The stroke property defines the color of a line, text or outline of an element: <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M 5 20 l 215 0" /> <path stroke="black" d="M 5 40 l 215 0" /> <path stroke="blue" d="M 5 60 l 215 0" /> </g> </svg> SVG stroke-width Property The stroke-width property defines the thickness of a line, text or outline of an element: <svg height="80" width="300"> <g fill="none" stroke="black"> <path stroke-width="2" d="M 5 20 l 215 0" /> <path stroke-width="4" d="M 5 40 l 215 0" /> <path stroke-width="6" d="M 5 60 l 215 0" /> </g> </svg>
SVG Filters The numbers in the table specify the first browser version that supports SVG filters. Browser Support The numbers in the table specify the first browser version that supports SVG filters.
SVG Pakistani Flag Code <!DOCTYPE > <svg" width="900" height="600" view. Box="-75 -40 120 80" version="1. 1"> <title>Flag of Pakistan</title> <rect x="-75" y="-40" width="120" height="80" fill="#fff"/> <rect x="-45" y="-40" width="90" height="80" fill="#01411 C"/> <circle r="24" fill="#fff"/> <circle r="22" cx="-7" cy="-40" fill="#01411 C" transform="rotate(-41. 63354, 45, -40)"/> <polygon points="0, -513674 301930, 415571 -488533, -158734 488533, 158734 -301930, 415571" fill="#fff" transform="rotate(-41. 63354) translate(16) rotate(18) scale(0. 00001557408)"/> </svg>
SVG Pakistani Flag
Thank You
- Slides: 25