Is there any place where I can upload an icon and get an SVG string vector?
Also, what are those tags in the code below?<g> <path> and viewBox, data-original, xmlns, d tags are?
Lately, Is the performance worth using SVG in place of regular icons?
<svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0"
data-original="#bfc9d1"
/>
</g>
</svg>
Here's a very good guide to using SVG with react. https://www.sanity.io/guides/import-svg-files-in-react
There are many online convertors you can use to create svg's e.g https://www.pngtosvg.com/
<g> element is used to group SVG shapes together.<path> element indicates that the vector to draw is a path. The could alternatively be a polyline or a shape e.g circle.<viewBox> attribute is a list of four values: min-x, min-y, width and heightxmlns attribute is XML Namespace which is needed to use the correct DTD - Doctype Declaration<d> attribute defines the path that will be drawn.From my experience SVG performs significantly faster when using inline SVG's. The main blocking element for page loading is the numberous amount of files that load sequentially. Using inline svg loads all the images within the page file.
The major benefit of SVG's are the scalability of vector over raster when zooming or viewing at differant resolutions.