I have an SVG image file and I want to put it to in HTML page as an SVG. So I still take the advantage of Zoom in/out with high resolution.

Here is my code. I put the SVG inside the , the inside the SVG.

The code run correctly but no SVG appear in the browser.

1. How can I show it?
2. Is there any way to place the SVG as SVG with all of its features( I read some question but non of them work with me).

// this to draw the svg
var div = document.createElement("div");
div.id="dsvg";
div.class="cdsvg";
div.style.width = "auto";
div.style.height = "210px";

var link='SVGimage.svg';

//creat svg to embed the svg to them
var svg = document.createElementNS(";, "svg");
svg.setAttribute("height", 210);
svg.setAttribute("width", 500);
//svg.setAttribute('xlink:href', link );

var XLink_NS = '';

var img = document.createElementNS(svg, 'image');
img.setAttributeNS(null, 'height', '210');
img.setAttributeNS(null, 'width', '500');
img.setAttributeNS(XLink_NS, 'xlink:href', link);

svg.appendChild(img);

var cell3 = row.insertCell(3);
div.appendChild(svg);
cell3.appendChild(div);

This HTML code is work but when I transfer it to JavaScript it does not ..

<svg id="svgimg" height="60" width="60" xmlns="; xmlns:xlink=";  >

UPDATE: I can see the SVG as img now: I added the library in order to change to SVG( because I want to change the colour of the lines and rectangle inside the SVG )

var link='test.svg';
var svgframe = document.createElement('img');
svgframe.id="svgframe";
svgframe.class="svg";
svgframe.setAttribute('src',link );

var SVGs = document.querySelectorAll('.svg');
SVGInjector(SVGs);

but when I see the inspect it is still img tag not SVG?? I want it as SVG so I can change the colour of the rectangles and the lines

I have an SVG image file and I want to put it to in HTML page as an SVG. So I still take the advantage of Zoom in/out with high resolution.

Here is my code. I put the SVG inside the , the inside the SVG.

The code run correctly but no SVG appear in the browser.

1. How can I show it?
2. Is there any way to place the SVG as SVG with all of its features( I read some question but non of them work with me).

// this to draw the svg
var div = document.createElement("div");
div.id="dsvg";
div.class="cdsvg";
div.style.width = "auto";
div.style.height = "210px";

var link='SVGimage.svg';

//creat svg to embed the svg to them
var svg = document.createElementNS("http://www.w3/2000/svg", "svg");
svg.setAttribute("height", 210);
svg.setAttribute("width", 500);
//svg.setAttribute('xlink:href', link );

var XLink_NS = 'http://www.w3/1999/xlink';

var img = document.createElementNS(svg, 'image');
img.setAttributeNS(null, 'height', '210');
img.setAttributeNS(null, 'width', '500');
img.setAttributeNS(XLink_NS, 'xlink:href', link);

svg.appendChild(img);

var cell3 = row.insertCell(3);
div.appendChild(svg);
cell3.appendChild(div);

This HTML code is work but when I transfer it to JavaScript it does not ..

<svg id="svgimg" height="60" width="60" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink"  >

UPDATE: I can see the SVG as img now: I added the library in order to change to SVG( because I want to change the colour of the lines and rectangle inside the SVG )

var link='test.svg';
var svgframe = document.createElement('img');
svgframe.id="svgframe";
svgframe.class="svg";
svgframe.setAttribute('src',link );

var SVGs = document.querySelectorAll('.svg');
SVGInjector(SVGs);

but when I see the inspect it is still img tag not SVG?? I want it as SVG so I can change the colour of the rectangles and the lines

• javascript
• css
• html
• svg

• I'm not sure to get the question but could this help: SVG Injector? It's really useful and efficient. It'll replace your <img> by a <svg>...</svg>. – Cohars Commented Sep 10, 2014 at 18:50
• hello @Cohars, It works with me when I put the image as HTML code .. but I want to use javascript since I want to show many images dynamically. – Nada Commented Sep 10, 2014 at 18:54
• By "image" you mean <svg> code or <img src="***.svg"> because it's different. I don't really get what you want to do actually. Do you want to generate SVG code with JS or using existing .svg files? – Cohars Commented Sep 10, 2014 at 19:21
• >>> yes embedding sag as img will make the SVG lost the feature as I understod. yes I want to generate SVG code with JS or using existing .svg files>> because I want to add later on click to appear in new window + I can change the colour .. – Nada Commented Sep 10, 2014 at 19:32

4 Answers 4

after our conversation in the ment, I think I can give you some help. Everything you need to know is here, Iconic does a huge work on SVGs and opensource it.

Let's say you have icon.svg :

<svg xmlns="http://www.w3/2000/svg" width="8" height="8" viewBox="0 0 8 8">
  <path d="M2.47 0l-2.47 3h2v5h1v-5h2l-2.53-3z" transform="translate(1)" />
</svg>

You can add it in your html like that:

<img class="svg" data-src="icon.svg">

And you can use SVG Injector

var IMGs = document.querySelectorAll('.svg');
SVGInjector(IMGs);

So you will be replaced by the SVG code. Than, you can style it

svg path {
  stroke-width: 1px;
  stroke: blue;
  fill: transparent;
}

It looks like you're trying to dynamically create your SVG element and then have it display in the browser.

Here's a rough cut of how I've done it in the past. This solution uses jQuery's html() function:

    var svgdiv = document.createElement('div');
    var svg = document.createElementNS('http://www.w3/2000/svg', 'svg');
    svg.setAttribute('height', heightVar);
    svg.setAttribute('width', widthVar);
    //Add all your elements to the SVG
    svgdiv.appendChild(svg)
    //the following shows it in a pop-up window, but the write() and html() functions should be what you need.
    window.open().document.write(svgdiv.html());

More precisely, if you wanted to place the SVG at a specific point in the document, such as the div myDiv:

$('#myDiv').html(svgdiv.html());

This line is incorrect

var img = document.createElementNS(svg, 'image');

You have the namespace right for the svg element

var svg = document.createElementNS('http://www.w3/2000/svg', 'svg');

so you just need to do the same again for the image i.e.

var img = document.createElementNS('http://www.w3/2000/svg', 'image');

• Use parameters: http://localhost/circle.svg?color=blue

• Use inline CSS:

  var s="url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3/2000/svg' width='100%' height='100%'><defs><pattern id='grid' width='"+(37+i)+".79527559055' height='37.79527559055' patternUnits='userSpaceOnUse' style='&#10;'><path d='M 50 0 L 0 0 0 40' fill='none' stroke='gray' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(#grid)'/></svg>\") no-repeat";  
  document.getElementsByTagName('HTML')[0].style.background=s; 
  

  Somebody also mentioned this but using with encodeURI... https://stackoverflow./a/42313650/1347572