SVG in HTML
You can embed SVG elements directly into your HTML pages.
Embed SVG Directly Into HTML Pages
Here is an example of a simple SVG graphic:
and here is the HTML code:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Try it Yourself »
SVG Code explanation:
- Start with the
<svg>root element - The width and height of the SVG image is defined with the
widthandheightattributes - Since SVG is an XML dialect, always bind the namespace correctly with the
xmlnsattribute - The namespace "http://www.w3.org/2000/svg" identifies SVG elements inside an HTML document
- The
<circle>element is used to draw a circle - The
cxandcyattributes define the x and y coordinates of the center of the circle. If omitted, the circle's center is set to (0, 0) - The
rattribute defines the radius of the circle - The
strokeandstroke-widthattributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border" - The
fillattribute refers to the color inside the circle. We set the fill color to yellow - The closing
</svg>tag closes the SVG image
Note: Since SVG is written in XML, remember this:
- All elements must be properly closed
- XML is case-sensitive, so write all SVG elements and attributes in same case. We prefer lower-case
- Place all attribute values in SVG inside quotes (even if they are numbers)
Another SVG Example
Here is another example of a simple SVG graphic:
and here is the HTML code:
Example
<!DOCTYPE html>
<html>
<body>
<svg
width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<rect
width="100%" height="100%" fill="green" />
<circle cx="75" cy="50"
r="40" fill="yellow" />
<text x="75" y="60" font-size="30"
text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>
Try it Yourself »
SVG Code explanation:
- Start with the
<svg>root element, define the width and height, and proper namespace - The
<rect>element is used to draw a rectangle - The width and height of the rectangle is set to 100% of the width/height
of the
<svg>element - Set the fill color of the rectangle to green
- The
<circle>element is used to draw a circle - The
cxandcyattributes define the x and y coordinates of the center of the circle - The
rattribute defines the radius of the circle - We set the fill color of the circle to yellow
- The
<text>element is used to draw a text - The
xandyattributes define the x and y coordinates of the center of the text - The
font-sizeattribute defines the font size of the text - The
text-anchorattribute defines where we want the midpoint (of the text) to be - The
fillattribute defines the color of the text - Write "SVG" as the text to show
- Close the SVG image with
</svg>
