The elements inject themselved automatically. This is important if a style is already applied during load time, which would otherwise cause a brief "unstyled content flash". SVGs can be hidden until injection has finished. It solves several issues with SVG injection: Here is a minimal example using SVGInject: Īfter the image is loaded the onload="SVGInject(this) will trigger the injection and the element will be replaced by the contents of the SVG file provided in the src attribute. There is an open source library called SVGInject that uses the onload attribute to trigger the injection. This solution completely replaces the img tag with a SVG and any additional bindings would not be respected. Then just apply data-bind="svgConvert: true" to your img tag. $svg = $svg.attr('class', imgClass + ' replaced-svg') 'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) The massive advantage is that it allows you to use CSS to change the color of the SVG now, like so: svg:hover path What the above code does is look for all IMG's with the class 'svg' and replace it with the inline SVG from the linked file. $svg = $svg.attr('class', imgClass+' replaced-svg') Add replaced image's classes to the new SVG Add replaced image's ID to the new SVG Then use this jQuery code (in a separate file or inline in the HEAD). The 'social-link' class is just for examples sake. Note that you need to set the IMG to have a class of svg. This is just like how you'd embed a normal image. I used Adobe Illustrator to make the graphic. Firstly, use an IMG tag in your HTML to embed an SVG graphic.
0 Comments
Leave a Reply. |