I need to inline svg from urls

Question

I need to inline SVG files from urls.
I'm not sure if it is important, but we are using Angular 2

I need to convert this

<img src='svg/workspace.svg'>

into this at runtime

<svg width="100%" height="100%" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" fit="">
  <path d="M13.95 4.05A7 7 0 1 0 15.93 10H13.9A5 5 0 0 1 4 9a5 5 0 0 1 8.536-3.536L10 8h6V2l-2.05 2.05z" fill-rule="evenodd"></path>
</svg>

Is there a library to do this?

Update

At this point we tried [inlineHTML] from angular, but it "sanitizes" the svg, and we end up with nothing

Update 2 a solution

We gave up and ended using the <use> tag inside the <svg> tag

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" 
      attr.xlink:href="svg/{{workspace.svgName}}.svg#icon"
></use></svg>

attr is required because angular2 didn't understand plan xlint:href, the result is similar to inlined SVG, but we have to edit the SVG files to remove width, height and fill tags.

It doesn't seem to make sense to do this at runtime. Is there more background information that we need to understand why you're doing this? (I ask because this is a possible [XY Problem](http://meta.stackexchange.com/a/66378)) — Shadowen, Oct 07 '16 at 04:44
http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement — Robert Longson, Oct 07 '16 at 06:25
we have a lot of templates with and some of them are using data binding, that why we need it be automatic — Gustavo Ulises Arias Méndez, Oct 07 '16 at 13:05

I need to inline svg from urls

0 Answers0