Page 145 - HTML5
P. 145
Chapter 36: SVG
Introduction
SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Remarks
SVG is an XML-based language for creating scalable vector images. It can be written directly
into an HTML document or embedded from external SVG files. Inline SVG can be restyled and
modified using CSS and JavaScript respectively.
Browser support for SVG varies, but can be ascertained here.
For more comprehensive information, see the SVG documentation.
Examples
Embedding external SVG files in HTML
You can use the <img> or <object> elements to embed external SVG elements. Setting the height
and width is optional but is highly recommended.
Using the image element
<img src="attention.svg" width="50" height="50">
Using <img> does not allow you to style the SVG using CSS or manipulate it using JavaScript.
Using the object element
<object type="image/svg+xml" data="attention.svg" width="50" height="50">
Unlike <img>, <object> directly imports the SVG into the document and therefore it can be
manipulated using Javascript and CSS.
Inline SVG
SVG can be written directly into a HTML document. Inline SVG can be styled and manipulated using
CSS and JavaScript.
<body>
<svg class="attention" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
<path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-
5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-
122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-
1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-
27t36,-10t36,10t27,27Z" />
</svg>
</body>
The above inline SVG can then be styled using the corresponding CSS class:
https://riptutorial.com/ 129
