EN
HTML - SVG images
3
points
In this article, we would like to show you how to use SVG images in HTML.
Quick solution:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<img src="https://dirask.com/static/bucket/1632934722_loupe.svg" style="height: 100px;"/>
</body>
</html>
1. SVG in <img>
In this section, we use <img> tag with the URL to the SVG graphics to import it.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<img src="https://dirask.com/static/bucket/1632934722_loupe.svg" style="height: 100px;"/>
</body>
</html>
2. Inline SVG (embedded)
In this section, we create our own SVG icon using <svg> tag. This solution doesn't use the graphics URL because SVG is embedded into HTML.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 100px;">
<path fill="black" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</body>
</html>
3. SVG with CSS background-image property
In this section, we use SVG graphics as background. To resize the graphics simply change the div element size.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.image {
background-image: url("https://dirask.com/static/bucket/1632934722_loupe.svg"); /* SVG */
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
Note:
If the
divdoesn't keep the aspect ratio of the SVG graphics, the background image may be repeated. Use thebackground-repeat: no-repeat;CSS style to disable it.