1

My idea is to inject inline SVG to my HTML using template literals. The purpose is simply use benefits of styling inline SVG icons with CSS but avoid bloating html code with SVG stuff. Also it's very easy to reuse repeating icons by just adding corresponding class. Also all icons or vector stuff like logo can be stored in single JS file. I know, that's hacky weird idea, but I found it's useful for my project.

So the problem is that my script won't work in browser from my local files. But it works well in CodePen and JSFiddle. Local file restrictions are disabled, JS is enabled.

Also any ideas how to optimize it and make it work better are welcome. 

var iconLogo = document.querySelectorAll(".ric-logo");
var i; 
for (i = 0; i < iconLogo.length; i++) {
    iconLogo[i].innerHTML = `
<svg width="120px" height="18px" viewBox="0 0 120 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="ric-logo" stroke="none" stroke-width="1" fill="black" fill-rule="evenodd">
                <path d="M23.326087,0 C23.2252174,0 23.1275,0 23.0266304,0 L23.0266304,0 L2.52173913,0 C1.12902107,-8.82200545e-17 1.70558772e-16,1.16795283 0,2.60869565 L0,15 L5.04347826,15 L5.04347826,5.2173913 C5.04347826,4.8572056 5.32573353,4.56521739 5.67391304,4.56521739 L22.9730435,4.56521739 C23.631932,4.55997742 24.1901947,5.0660023 24.2717391,5.7423913 C24.306535,6.10977596 24.1892199,6.47520901 23.948885,6.74807191 C23.7085502,7.02093481 23.3677046,7.17567223 23.0108696,7.17391304 L7.56521739,7.17391304 L7.56521739,11.7391304 L23.0266304,11.7391304 L23.0266304,11.7391304 C23.1275,11.7391304 23.2252174,11.7391304 23.326087,11.7391304 C26.4597026,11.7391304 29,9.11123658 29,5.86956522 C29,2.62789386 26.4597026,1.98495123e-16 23.326087,0 Z" id="Path"></path>
                <path d="M64.9565217,1.21154527e-06 L61.173913,1.21154527e-06 C60.170401,-0.000815107822 59.2077021,0.410915432 58.4977174,1.14456624 L49.8796739,10.0532605 C49.6430123,10.2978107 49.3221127,10.4350542 48.9876087,10.4347821 L46.673913,10.4347821 C46.3257335,10.4347821 46.0434783,10.142794 46.0434783,9.78260833 L46.0434783,1.21154527e-06 L41,0 L41,12.3913036 C41,13.8320462 42.1290211,14.9999988 43.5217391,14.9999988 L49.826087,14.9999988 C50.829599,15.0008151 51.7922979,14.5890846 52.5022826,13.8554338 L61.1108696,4.95000041 C61.3493224,4.70184137 61.674158,4.56319679 62.0123913,4.56521787 L64.326087,4.56521787 C64.6742665,4.56521787 64.9565217,4.85720602 64.9565217,5.21739167 L64.9565217,14.9999988 L70,15 L70,2.60869644 C70,1.16795385 68.8709789,1.21154527e-06 67.4782609,1.21154527e-06 L64.9565217,1.21154527e-06 Z" id="Path"></path>
                <path d="M114,10 L120,10 L120,16 C120,17.1045695 118.992641,18 117.75,18 L114,18 L114,10 Z" id="Path"></path>
                <path d="M106,0 L106,9.7826087 C106,10.1427944 105.720178,10.4347826 105.375,10.4347826 L87.625,10.4347826 C87.279822,10.4347826 87,10.1427944 87,9.7826087 L87,0 L82,0 L82,12.3913043 C82,13.8320472 83.1192881,15 84.5,15 L108.5,15 C109.880712,15 111,13.8320472 111,12.3913043 L111,0 L106,0 Z" id="Path"></path>
    </g>
</svg>
`;
}
/* Styling all instances of SVG */

.ric-logo * {
  fill: blue;
 width: 120px;
 height: 15px;
};
<body>
<header class="header-menu">
 <div class="ric-logo">
 </div>
 <div class="menu-content">
  <ul>
   <li><a href="#"></a>Item-1</li>
   <li><a href="#"></a>Item-2</li>
   <li><a href="#"></a>Item-3</li>
   <li><a href="#"></a>Item-4</li>
  </ul>
 </div>
</header>
<main>
  <!-- Test repeating SVG class -->
  <div class="ric-logo">
 </div>
</main>
<footer></footer>
</body>
Yury S
  • 11
  • 1
  • Have you considered simply using a css background image sort of like this: `.ric-logo { background-image: url(/images/ric-logo.svg); }` ? – Ted Mar 08 '19 at 20:10
  • Hi Ted, my idea is to make that SVG works same way as Inline SVG. If I use it as an external file (image) I have no access to its inner parts. You can see in my snippet that I can apply CSS style to that SVG — change color fill, change something on hover, for example or even animate some parts. Actually it can be quite useful — pretty simple, lightweight solution without any external libraries. But I can't figure out why it doesn't work. – Yury S Mar 08 '19 at 20:20
  • Ahh, gotchya. That makes sense. – Ted Mar 08 '19 at 20:31
  • As an alternative solution, in order to avoid bloating you may create an svg root at the botton of your page, just before the `

    ` tag. This way you won't be bothered by the code. In your HTML you can create an svg element and use the icon with `

     – enxaneta Mar 09 '19 at 07:46
  • Thank you! I am already figured out (you can see example and snipped below), but solution that you suggest is quite useful, especially if there is no too many SVG. The initial idea with js injection is already works and I found it very useful (i can load all icons and illustrations for entire website just once from one js file). – Yury S May 30 '19 at 19:12

2 Answers2

0

I'm not sure how you've structured your files, so I might not be reproducing your problems correctly. Let me know if I've made any false assumptions.

Firstly, codepen and the snippets on Stack Overflow automatically include CSS and JS, while local files do not. If you haven't already, you need to include appropriate <script> and <style> tags containing your css and your js.

If you are already doing that and you've just edited them out for the purposes of this question, then another possible problem is that the javascript you've provided you've included at the top of your page. document.querySelectorAll(".ric-logo") won't work until the page has been loaded, and if you put the javascript you've supplied at the top of your page, it will run before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page.

If for some reason you don't want your javascript at the bottom of your page, you need something like jQuery's $(document).ready, or one of the vanilla alternatives from this question.

Nicholas
  • 3,643
  • 2
  • 7
  • 17
  • 1
    Hi Nicholas, Thank you! It looks like it's working. I just placed my – Yury S Mar 08 '19 at 20:39
  • 1
    I didn't think about that `document.querySelectorAll(".ric-logo")` will works only when all content is loaded. Obviously it's right because that script need to find all selectors. I checked your suggestions about vanilla solution to keep all dependencies at top, so it also works well. I will attach the snippet, maybe it will be helpful for others – Yury S Mar 08 '19 at 21:23
0

@Nicholas was right, and the problem was that document.querySelectorAll not working until all the DOM stuff loaded. So one solution is to place document.querySelectorAll to the bottom of the page. Another is to use function that run your scripts when pages is loaded. It's explained here.

I applied it to my script and it works well. So if you interested I post the snipped here. It may be helpful for templating using string literals or like in my case dynamically inject Inline SVG. 

// Icons SVG injection 
// Function that run code when DOM is loaded
function ready(callback){
 // in case the document is already rendered
 if (document.readyState!='loading') callback();
 // modern browsers
 else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
 // IE <= 8
 else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') callback();
    });
}

ready(function(){
// All inside tht function executes when DOM is loaded

// Logo SVG 
 var mySvg = document.querySelectorAll(".my-svg");
 var i; 
 for (i = 0; i < mySvg.length; i++) {
     mySvg[i].innerHTML = `
      <svg width="188px" height="188px" viewBox="0 0 188 188" version="1.1">
        <circle id="Oval" fill="#FC4903" cx="94" cy="94" r="94"></circle>
</svg>
  `
 };

});
/* styling svg */


.my-svg * {
  fill: red;
 width: 200px;
 height: 200px;
};
<!-- creating container where you like to insert SVG -->
<div class="my-svg">
  <div></div>
</div>
Yury S
  • 11
  • 1