SVG in HTML
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
SVG in HTML
❮ Previous
Next ❯
In HTML5, 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:
Sorry, your browser does not support inline SVG.
and here is the HTML code:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Try it Yourself »
SVG 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 4px 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
Note: Since SVG is written in XML, all elements must be
properly closed!
❮ Previous
Next ❯
