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.
Related
I'm using selectPDF html to pdf converter to convert an svg document to pdf. I'm using the webkitRestricted browser engine to ensure it runs correctly on azure. Generally speaking, everything is working correctly, including using pattern definitions. I recently added the use of the patternTransform attribute with the rotate option. This does not appear to be recognized by the webkitrestricted engine and is not working. If i take the underlying html into either firefox or chrome latest versions, the patternTransform attribute does function correctly. Is there a way to overcome this issue using selectpdf ? I'm not clear which version of webkit is being called by selectpdf and whether i can control this in any fashion ?
I'm using the foreignObject tag inside an SVG, which is working on Chrome, however, it isn't working on Safari. I have gone through about 20 solutions, but the issue persists.
One of the solutions was a user mistyping foreignObject, they instead wrote it as foreignobject (lowercase "O").
In my code, foreignObject is spelled with the correct casing, however, in Safari's devtools, I notice that the tag is spelled foreignobject!
(Below, Safari devtools screenshot, and my code screenshot)
I'm sure this is what is causing the issue I'm having, but it makes no sense, since I have it written correctly in the code, but it's misread when Safari builds the site.
Is there any precedence for something like this? What can I do to change this misreading of my element tag name?
The problem is that you are setting the xmlns attribute of your <foreignObject> to the XHTML name-space. Safari will thus consider it an HTML element when the SVG document is served as a standalone (if it was served inline in an HTML document, then they'd discard it.
This attribute must be set on the top HTML element, that is on the <foreignObject> content:
<foreignObject
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
width="300"
height="100"
>
<html-elem xmlns="http://www.w3.org/1999/xhtml">...
(Note that when served inline in an HTML document, Safari's web-dev tools will also show this element lower-cased, even though it will work correctly).
I'm creating an element that clips images with svg and css. Because I can't pass an entire svg as a property I added it as a slot in the template.
It works in firefox but I don't get why it isn't working in Chrome.
I can see that the element is being rendered as the last element inside the #img-container div on Chrome and on Firefox it is being rendered right below the iron-image element.
Please see this plunker example:https://embed.plnkr.co/mAtZQSTzxte1HuFFA8AB/
See the last example which displays the svg inside a slot.
Any ideas? Cheers!
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.
I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).