Scalable vector graphics, sometimes called SVG, is a 2D graphic or image file. for To create visual effects, SVG files use mathematical formulas and a set of shapes, lines, and other features. SVG is just XML code that specifies how to render colors, where How each form should appear relative to the other shapes within the file, and how the shapes should appear show.
SVG and some other vector graphics depend on Pixels used to convey visual data, such as jpeg or png files.
Four advantages of using SVG files in web design are as follows -
Clarity
SVG files can be infinitely resized. SVG files have significant advantages over raster images because You can enlarge and resize them as many times as you like without losing clarity. raster image If not scaled correctly, they can lose sharpness and may even start to look grainy.
flexibility
It’s easy to create responsive SVG files that look good on any device, even The viewer zooms in on the web page. SVG files can be resized repeatedly throughout the editing phase without losing clarity. SVG files are a great choice for logos and simple infographics Because of their adaptability. SVG files can also be used for animations, and they are particularly suitable for Favorable for developing fonts with different color schemes and gradients.
Smaller files
SVG file size based on visual complexity or number of paths in the design Probably much less than a PNG or JPG of the exact same image. SVG files can be According to Vecta.io, 60% to 80% smaller than PNG, which also reduces load times and improve user experience (UX). Another benefit to website SEO is that pages load faster.
Easier Access and Inclusion
SVG files offer many advantages in terms of accessibility and diversity. designer Ability to include structural data in SVG files that define graphic visual elements May itself help users of specific assistive technologies understand the content contained therein an image. As an option, raster files only use metadata (i.e. alternative text) to inform screen readers and Other assistive technologies related to graphic content.
In this article, we will explore and use many SVG usage scenarios (Scalable Vector Graphics).
The fastest way is to use the HTML element.
<img src='logo.svg' alt="some file" style="max-width:90%" style="max-width:90%" style="color:orange;"/>
You need the following to embed SVG into the
src attribute
Use the height attribute when your SVG does not have an inherent aspect ratio.
Use the width attribute when your SVG does not have an aspect ratio natively.
Deployment is simple and fast.
Nested HTML elements and will convert the SVG image together into a hyperlink.
SVG files are cached for faster loading.
SVG files are not easily manipulated.
Simply use inline CSS to style SVG.
CSS pseudo-classes cannot be used to style SVG.
HTML source code
<!DOCTYPE html>
<html>
<title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<body>
<img src="https://img.php.cn/upload/article/000/887/227/169453086951251.png" alt="How to import SVG files in JavaScript?" style="max-width:90%" style="max-width:90%" style="background-color: transparent" />
</body>
</body>
</html>
In the following method let us understand how to use SVG as
<object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object>
In order to embed SVG using the "object" element, the following is required -