Learn how to convert your images to SVG coding.

Converting a <img> tag’s src attribute to an SVG (Scalable Vector Graphics) format can have several benefits in certain situations. SVG is a vector graphics format that uses XML to describe two-dimensional vector graphics, allowing for images to be scaled without loss of quality.

This article is not about simply converting an image to an SVG, for this, there are a lot of online tools that can do this for you, such as SVG Converter – Image Online Convert. This post is a how to convert an <img src=""/> to an <SVG> when it is added as dynamic content, for example, when a CMS uploads it to a <img/> tag.

<!--Like, this:!-->
<img class="custom-svg-icon" src="image.svg" alt="image svg example"/>
<!--to!-->
<svg xmlns="http://www.w3.org/2000/svg" width="114.59600067138672" height="105.15599822998047" viewBox="0 0 114.596 105.156" class="custom-svg-icon replaced-svg">...  </svg>

What are SVG files used for?

Scalable Vector Graphics have come a long way in recent years — but what are SVGs used for in practice?

Website icons and logos.

Designers often use SVGs to display website icons like buttons, as well as company logos. This file type’s ability to scale up or down without ever compromising its quality means they’re ideal for graphics that need to appear in multiple places and in a range of sizes.

Infographics and illustrations.

Thanks to the use of XML within SVG files, search engines like Google can read text-heavy charts and graphs, which can help with search engine optimization. Because Google can detect keywords within SVGs, it can potentially push a webpage to a higher rank in search results. Plus, to help make web pages just that much more interesting, SVGs also support animation.

IMG SRC to SVG Code Solution 💡

Define a class to the <img/> tag, my example I gave “custom-svg-icon”;

For each one, I attribute an ID, Class and src;

$(function(){
//Change the class name, if it has to be applied for more SVG elements
        jQuery('img.custom-svg-icon').each(function(){
            var $img = jQuery(this); // The image
            var imgID = $img.attr('id'); // ID attribute
            var imgClass = $img.attr('class'); // Class Name
            var imgURL = $img.attr('src'); // URL of the SVG image

            jQuery.get(imgURL, function(data) {
                //The data param contains the XML data of the SVG image
                //alert(new XMLSerializer().serializeToString(data));

                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Give the image's ID to the SVG
                if(typeof imgID !== 'undefined')
                {
                    $svg = $svg.attr('id', imgID);
                }

                // Give the image's class to the SVG
                if(typeof imgClass !== 'undefined')
                {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Check if the viewport is set, else we gonna set it if we can.
                if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width'))
                {
                    $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                }

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml'); //Returns as XML
        });
    });

Why did I think to do it? Well, if you are here, or you are just curious, or you need something similar. In my case, I really like to animate SVG icons on my projects, and once I felt the necessity to animate the SVG with CSS, but the element was an <img/> tag variable. So I developed a JQuery code to get the image to translate to an SVG.

To animate the icons, I used the SVG Artist, which gave you the animate CSS code. For other libraries, I do recommend read this article.

However, it’s important to note that SVG might not be suitable for all types of images. Complex photographs or images with a wide range of colors might not compress as efficiently in SVG format, potentially resulting in larger file sizes. Additionally, browser compatibility and performance considerations should also be taken into account when deciding whether to convert an <img> tag’s src to SVG.

In summary, converting an <img> tag’s src to SVG can offer benefits such as scalability, smaller file sizes, accessibility, and control over design, but it should be done considering the specific needs of your project and the characteristics of the images you’re working with.

Thank you all for reading this article, And until my next article, have a splendid day 😉