SVG or Scalable Vector Graphics (Scalable Vector Graphics) is very handy to use, for example, to display a logo that always stays sharp when scaled or animated. Finding svg freebies is easy, SVGOCEAN has a lot of different images, you will definitely find something for your needs. In fact, this is a text file, which is an open web standard for describing two-dimensional vector images without loss of quality when scaling.
Scalable Vector includes a certain set of functionality, including alpha masks, options for applying templates, applying filter effects, and so on. You can open a file with the .svg extension using almost any modern browser.
You should be aware that the components of a file with the .svg extension can take up quite a lot of space, so the .SVGZ format was created, it uses gzip compression technology. Vector Graphics gives users the ability to compress as well as index images, and the SVG file extension includes the ability to search for the desired image.
Support:
- All major browsers: Google Chrome, Edge, Firefox, Safari, Opera, Internet Explorer)
- Most editors that support vector graphics (Adobe Illustrator, Sketch, etc.)
Cons of SVGs
SVG design can get complicated
Not displayed in some older browsers
Limited support for email clients
Advantages of the vector way of describing graphics over raster
The benefits of vector graphics include:
- ease of use;
- small size of the final file (the size occupied by the descriptive part does not depend on the actual size of the object, which makes it possible to describe an arbitrarily large object with a file of the minimum size);
- insignificant demands on computer resources (RAM, processor speed, video card and other systems);
- Preservation of file size and image quality during any scaling operations. Due to the fact that information about an object is stored in a descriptive form, you can increase the graphic primitive indefinitely, and it will remain smooth. This also means that moving, rotating, filling, etc. do not degrade the quality of the picture;
- when increasing or decreasing objects, the thickness of the lines can be set to a constant value, regardless of the actual contour.
Raster images don’t scale well, while vector images can be scaled up indefinitely without loss of quality.
While SVG is the newest format and can often be saved to the smallest file size, it’s not always the best option.
Where to use SVG graphics?
The small file size and scaling give a big plus in using svg files:
— For the design of sites, blogs.
— For registration of text documents.
– Designing presentation slides.
— To create digital graphics.
Vector simple flat graphics are now at the peak of popularity, so this format is used often. Stock resources distribute graphics, including in SVG format.
The site should look equally good regardless of device size and pixel density. This can be achieved using the vector graphics format – SVG. SVG graphics are useful for icons.
Where to edit SVG graphics?
In the Word program. Also in any program that edits vector files. You can use the Figma resource, which not only allows you to modify an existing SVG file, but also create your own from scratch.
Why do you need SVG files on a slide?
So that your presentation can be flipped easily and does not take up much space on your computer or smartphone. To apply trending pictures.
How to connect SVG to html page
There are three options for adding vector graphics. Each has its own indications for use.
Through the <img> tag
Here everything is the same as with raster graphics:
<img src=”img/icon.svg” alt=”Magnifying glass icon”>
The disadvantage of this method is that it will not work to interact with internal SVG elements. The file will be like behind glass: you can look, but you can’t touch it.
This connection option is used for content svg images that do not need to be changed externally (like graphs, diagrams and logos).
Via background
As in the case of bitmap graphics, SVG can be included via the css background property:
.icon {
background-image: url(“../img/icon.svg”);
}
The downside here is the same as the previous method. This case is suitable for decorative images (backgrounds, icons and other trifles), which also do not need to be changed outwardly.
Inserting svg code directly
Inserting svg code directly into an html file is the third way. And for us the most interesting. It allows you not only to display the finished graphics, but also to change it (element thickness, fill, stroke, and so on).
<svg>
<rect x=”10″ y=”10″ width=”100″ height=”100″ />
</svg>
Such an insert helps when, when interacting with an image, you need to visually modify it – for example, recolor an svg icon when you hover over it.
Conclusion
Think about how you use images in your project, how you choose a file type, to find the one that will work best for what you’re trying to achieve. You may even find that some projects contain images that use several different file types at once. This actually happens quite often!
