html svg
What is SVG?
- SVG stands for Scalable Vector Graphics
- SVG is used to define graphics for the Web.
- SVG can also be used to embed an SVG fragment inside an HTML document.
- SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG Circle
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" /> </svg> </body> </html>
html svg tag
Note: The
xmlnsattribute is only required on the outermost svg element of SVG documents.
html5 svg
SVG Attributes
| Name | Description |
|---|---|
width |
Displayed width of the rectangular viewport. |
height |
Displayed height of the rectangular viewport. |
viewBox |
SVG viewport coordinates for the current SVG fragment. |
x |
x coordinate of the svg container. No effect on outermost svg elements. |
y |
y coordinate of the svg container. No effect on outermost svg elements. |
version |
Version of SVG is used for the inner content of the element. |
preserveAspectRatio |
Displayed with a different aspect ratio. |
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
html svg image
Some Other SVG Examples
SVG Rectangle
<svg width="400" height="100"> <rect width="400" height="100" fill="blue" stroke-width="10" stroke="black" /> </svg>
SVG Rounded Square
<svg width="90" height="90"> <rect width="80" height="80" rx="20" ry="20" fill="blue" stroke-width="10" stroke="black" /> </svg>
SVG Star
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" fill="yellow" stroke="red" stroke-width="5" fill-rule="evenodd" /> </svg>
Browser Support
| Element | Chrome | Edge | Mozilla | Safari | Opera |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |