In HTML5, the SVG elements can be embedded directly into your HTML page.
If the SVG is written in XML, all elements should be appropriately closed!
Shape elements in SVG
SVG has some predetermined shape elements. Here they are:
- rectangle <rect>
- circle <circle>
- ellipse <ellipse>
- line <line>
- polyline <polyline>
- polygon <polygon>
- path <path>
Example of embedding SVG into HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
</svg>
</body>
</html>Now let's understand the code:
- An SVG image always starts with an <svg> tag.
- The SVG image's width and height are specified by the width and height attributes of the <svg> element.
- The <circle> element draws a circle.
- The cx and cy attributes specify the x and y coordinates of the circle's center. If cx and cy are absent, the center of the circle is set to (0, 0).
- The r attribute is used to specify the radius of the circle.
- The stroke and stroke-width attributes control the appearance of the outline of a shape. In our code example, we have set the outline of the circle to a 5px purple "border."
- The fill attribute sets a color within the circle. We set it to pink.
- The SVG image is closed with the closing </svg> tag.
Practice Your Knowledge
What are the main features of SVG format in HTML5?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.