Geek Answers Handbook

How to put SVG image file in HTML using JavaScript

I have an SVG image file and I want to place it on an HTML page as an SVG. Therefore, I still take advantage of the high resolution Zoom in / out.

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

The code works correctly, but SVG is not displayed in the browser.

1) How can I show this? 2) Is there a way to place SVG as SVG with all its functions (I read some question, but it doesn’t 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.org/2000/svg", "svg");
                    svg.setAttribute("height", 210);
                    svg.setAttribute("width", 500);
                    //svg.setAttribute('xlink:href', link );

                     var XLink_NS = 'http://www.w3.org/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 works, but when I port it to JavaScript, it doesn't ...

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

UPDATE: I see SVG as img now: I added a library to switch to SVG (because I want to change the color of the lines and the 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);

, img tag, SVG?? , SVG,

+4
4

, SVG-, .

, . jQuery html():

    var svgdiv = document.createElement('div');
    var svg = document.createElementNS('http://www.w3.org/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());

, SVG , div myDiv:

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

+1

, , . , , , Iconic SVG .

, icon.svg:

<svg xmlns="http://www.w3.org/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>

html :

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

SVG Injector

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

, SVG.

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

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

svg

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

i.e.

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

  • : http://localhost/circle.svg? Color = blue

  • CSS:

    var s="url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/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;

    - , encodeURI... fooobar.com/questions/2111642/...

0

More articles:


All Articles