I'm trying to use an SVG file with symbols, but it doesn't work inside a polymer element.
This is the code I use:
<svg class="icon-home"><use xlink:href="/images/icons.svg#icon-home"></use></svg>
It works perfectly fine in my index.html but just doesn't display the icon when used inside the polymer template.
If I take the contents of /images/icons.svg and put it directly in the polymer element it works. (I'm sure that the path is correct though)
Any idea on what could be the problem?
As a workaround I just created a <svg-icon> polymer element, that just inlines the contents of the .svg file. It works but it seems to me that it's more a workaround than a solution.
Related
I'm trying to show a svg icon on html page with pug syntax, but doesn't work
This is the code
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg")
The <use> element cannot link to complete files, only to named fragments. There is a proposal to change this in the future, but for now, the root <svg> element in file glass.svg needs to have an id, lets say id="glassRoot". Then you can do
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg#glassRoot")
Add id="glassRoot" -> (#glassRoot) after glass.svg.
I need to fetch a lot of SVG documents from AWS and I use vue.js to render the content of the SVG. This works fine in Chrome, Firefox, Edge and Safari but fails without errors in IE11.
I have created jsFiddle to illustrate my issue: https://jsfiddle.net/dotnetCarpenter/pp7bcLkk/
The raw SVG file can be viewed here and is rendered in IE11: https://napp-siesta-test.s3-eu-west-1.amazonaws.com/siesta-demo-mwqxbrqx/uploads/1506688653629/viewer/472.svg
Since I need to set v-show and class on the SVG, I have a <svg> container in my template that I add the SVG string to via v-html.
I strip the <svg> element from the received SVG document and also resolve the relative paths to fonts, since I'm in-lining the SVG.
As discussed in this issue v-html uses innerHTML which has no effect on SVG element in IE.
Luckily in VueJS 2.6 there was a workaround added.
So for you there are two possible fixes: upgrade VueJS version or use custom render function and construct VNodes for SVG content manually.
For a mobile app (built with the Ionic framework), I want to use a diagram I created with Google Spreadsheets. Following the steps described on this page I managed to save the diagram as an .svg file by copying the svg code shown in Chrome Dev Tools.
I then used the .svg file in the src attribute of the img tag, as described in this question.
Unfortunately, this does not show the image. Does the svg code of Google contain some code which doesn't make it render? Here is the link to the svg code.
Standalone external SVG must have a namespace declaration. They are XML files and the browser needs to know what type of XML they are (in this case an SVG).
You'll need to alter the first line of the SVG file to:
<svg xmlns="http://www.w3.org/2000/svg" width="786" height="459" overflow="hidden">
Try that.
I am trying to create a custom element that extends a SVGGlement. Here is the JSBin link to the code: http://jsbin.com/kovumoloda/2/edit?html,console,output
When I run the code, ready() isn't called and so aren't the contents of the Shadow DOM rendered.
I tried the same example without Polymer and it worked. Here is the JS Bin link http://jsbin.com/vihosojofi/1/edit?html,console,output
Is there anything I need to do differently to make this thing work with Polymer ?
Thanks !
I am using html2canvas to create a 'screenshot' of a HTML page that contains SVG.
Everything looks good, except the element.
I know that it should be possible to render SVG in Canvas; PhantomJS, fabric.js and CanVG do it.
Is this something that html2canvas does not support? Or am I doing something wrong, and this should just work?
If this has not been implemented, what is the best way to extend html2canvas (using canvg)?
Capturing SVG images works by transforming them into canvas, using canvg. Include both javascript files as indicated on that page. Then the easiest way to do this is:
<body onload="canvg()">
See the parameterless call example.
When all SVG images have been converted, html2canvas works flawlessly.
Of course, all SVG images will be converted to canvases, but I did not see a difference.