0

Implementing SVG Elements with JavaScript – Why and How of It?

Samuel Dawson June 8, 2015

SVG (also referred to as Scalable Vector Graphics) is an image format used for 2D vector graphics. The benefit of using SVG images is that they can scale to any screen size without losing image quality, and looks good on devices with retina display. When it comes to injecting such images, some of you may find the process complicated. But, in reality, this task can be performed in a simple manner with the help of JavaScript. Wondering why you should use JavaScript to inject SVGs?

Implementing SVG Elements with JavaScript

Through this post, we’ll help you know why you should integrate SVG images using JavaScript and how.

Why Choose JS to Add SVGs Into Your Project?

When it comes to deploying SVG into any of your project, there are many different ways that can be used to accomplish such objective. But, injecting scalable vector graphics is usually done with the help of three important variables, such as:

  • HTTP requests.
  • Capabilities to customize CSS and JavaScript.
  • Support of browser.

You can meet all of the above mentioned requirements with the help of inline SVG <svg> markup. For instance, using the inline SVG, you can make use of “fallback PNG” for web browsers that do not support SVG images.

However, at times Inline SVG can become a bit confusing when you’re working on large-size projects. In fact, you may find the task of managing inline “<svg>” markup somewhat challenging, particularly when PHP is being used; let’s take an example to learn about the difficulty, you may face in such a case:

Let’s say, you want to make a few changes, which requires you to search thoroughly the entire document to locate the needed SVG markup. Once you’ve found the markup, you’ll need to make certain changes to it.

Now in order to make the changes, you’ll also need to find the respective CSS and so on. This means, you need to perform all such tasks when using Inline SVG, which can be overwhelming for a novice.

Another problem you’ll encounter when using inline SVG is the inability to hold off  loading. Besides this, remember that your SVG markup won’t be cached by the browser if the HTML/XML markup is not cached.

But, thanks to JS, all of the above discussed disadvantages can be dealt with while using the benefits that inline SVG offers.

Understanding How to Use JS For Injecting SVG

The below mentioned steps will help in injecting SVG elements using JS:

Step 1 – Create or Download SVG’s

You can create your own custom SVG’s or can download any icon you want to work with as an SVG. And then, don’t forget to save your SVG elements in the image format as you deem perfect (such as .ai for Illustrator). So, in case you’re using Illustrator to work on your SVG file, your code will look something like as follows:

<?xml version=”1.0″ encoding=”utf-8″ ?>
  1.  
  2. &lt;!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –&gt;
  3.  
  4. &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  5.  
  6. &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="120px" height="97px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve"&gt;
  7.  
  8. &lt;style type="text/css"&gt;
  9.  
  10. &lt;![CDATA[
  11.  
  12. .style-circle {      fill: #333;    }
  13.  
  14. .style-circle2 {      fill: #FF0000;    }
  15.  
  16. ]]&gt;
  17.  
  18. &lt;/style&gt;
  19.  
  20. &lt;circle class="style-circle" cx="50" cy="50" r="45"/&gt;
  21.  
  22. &lt;circle class="style-circle2" cx="50" cy="50" r="25"/&gt;
  23.  
  24. &lt;/svg&gt;

Output:

 SVG Output

Step 2 – Make Your SVG Uncluttered By ‘Minifying’ It

So, now that you’re ready with your SVG markup, make sure that it is free from clutter. To do so, minify the markup using any HTML Minifier.

Step 3 – Create a .js Document for SVG

Lastly, you will have to set up a JS document, and assign it some name such as SVGinject.js or anything you like. And then, a variable needs to be cached wherein the SVG elements will be injected. In our case, we’re using the variable named “mynewlogo” – the element we need to add in the document as SVG. Next, we’re adding eventListener() method to see if the document has loaded or not.

Finally, simply paste the SVG markup in the form of the innerHTML content of your element, using the following code:

  1. &nbsp;
  2. <p style="text-align: justify;">var logo = document.getElementById("mynewlogo");</p>
  3. &nbsp;
  4. <p style="text-align: justify;">document.addEventListener('DOMContentLoaded', function(){</p>
  5. &nbsp;
  6. <p style="text-align: justify;">mynewlogo.innerHTML = 'Your SVG Code Needs to Come Here';</p>
  7. &nbsp;
  8. <p style="text-align: justify;">});</p>
  9. &nbsp;
  10. <p style="text-align: justify;">For making your logo icon named as “mynewlogo” visible, you'll need to create an element with an ID that matches the original SVG element as follows:</p>
  11. &nbsp;
  12. <pre lang="html">

<span id=”mynewlogo”></span>

That’s it! Your SVG elements will get integrated with the help of JavaScript into the new element, as soon as the .js document content gets loaded.

Conclusion

In case you’re using SVGs in your web page, but would like to postpone their loading time until the page is loaded properly, then one viable solution is to add SVG with the help of JavaScript. This post will help you understand why you should favor using JS to inject SVG’s into your project and how.

Leave a Comment


Login to your account

Can't remember your Password ?

Register for this site!