I am using Angular7 and trying to load SVG image as an Object element. when I do ng serve and open the URL in firefox its not loading svg file. In chrome its working perfectly fine. and If I open the svg file directly(not through the angular application) in firefox it is loading.
I have tried viewbox and height & width and all but still same problem.
<object id="svg1" data="assets/12455_01.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>
inside my svg root element I have viewbox as: viewBox="-36.52 -2607.7 2723 2621"
css file:
object{
width:100%;
height: 80vh;
}
I want to display the svg file provided in Object element when I load/run the application in all kinds of browsers.
I got it fixed myself, but not sure whether this is correct approach. I have set the path and type through ngOnInit like below and it got loaded successfully.
ngOnInit(){
let obj = document.getElementById("svg1");
obj.setAttribute('data', this.svgPath);
obj.setAttribute('type', "image/svg+xml");
}
Related
This works:
<img src="img/home/icon.svg" alt="one" class="trysvg">
This doesn't work:
<svg>
<use xlink:href="img/home/icon.svg" class="trysvg"></use>
</svg>
CSS:
.trysvg {
//position: relative;
//display: block;
//color:black;
height: 20rem;
width: 20rem;
}
When checking dev tools and trying it with use svg it shows shadow-root (closed). Tried to search, but couldn't come up with any solution. SVG icon is from reliable source - downloaded, so there shouldn't be a problem with svg code. Any ideas?
edit: I also tried to put class on the < svg class... >, was still not working and also put class on < svg class... > + < use class.. > and still nothing.
edit2: when I use href instead of xlink href the problem remains..
SVG 1.1 does not permit <use> elements to point to an entire file. SVG 2 does permit this but no browser has got round to implementing that part of the SVG 2 specification yet.
If you want to use a <use> element and have it work with today's browsers, you'd need to put an id on the <svg> root element and have a fragment identifier that references that id.
According to https://www.w3.org/TR/SVG/styling.html#StylingWithCSS, in order to configure svg to use styles defined in an external stylesheet, you can import them as follows:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
#import url(mystyles.css);
</style>
<rect .../>
</svg>
This works fine in Chrome when the files exist in their original format, whether served from a web server or read from the local filesystem, but after building with webpack the resulting app's svg elements have no styling, so clearly the stylesheet isn't getting found.
All of the searches I've done turn up lots of info on what is more or less the reverse operation - referencing svg files from within css (e.g., to specify an svg image as the background for an element).
Does anyone know of a webpack plugin and/or configuration specifically for this case?
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.
https://codepen.io/leftynaut/pen/PKwEqz
Any idea what I am doing wrong with my svg background image here to make them not show up on IE11?
(jQuery acting up on IE also, but my actual implementation with Angular is working fine)
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><path fill='#000000' d='M192,32 C103.75,32 32,103.75 32,192 C32,280.25 103.75,352 192,352 C280.25,352 352,280.25 352,192 C352,103.75 280.25,32 192,32 Z M384,192 C384,298 298,384 192,384 C86,384 0,298 0,192 C0,86 86,0 192,0 L192,0 C298,0 384,86 384,192 Z'></path></svg>") no-repeat center;
I recently discovered that Internet Explorer is a bit picky with the format of the URL in background-image property. Specifically, you need to specify the charset differently and URL encode the SVG part:
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20400%27%3E%3Cpath%20fill%3D%27%23000000%27%20d%3D%27M192%2C32%20C103.75%2C32%2032%2C103.75%2032%2C192%20C32%2C280.25%20103.75%2C352%20192%2C352%20C280.25%2C352%20352%2C280.25%20352%2C192%20C352%2C103.75%20280.25%2C32%20192%2C32%20Z%20M384%2C192%20C384%2C298%20298%2C384%20192%2C384%20C86%2C384%200%2C298%200%2C192%20C0%2C86%2086%2C0%20192%2C0%20L192%2C0%20C298%2C0%20384%2C86%20384%2C192%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center;
For the record, the full URL encoding is probably overkill. You really only need to do the < and > but I'm just being lazy and using a URL encoder instead of editing your code directly.
It is discussed in greater detail over in this question:
CSS: Using raw svg in the URL parameter of a background-image in IE
This CodePen shows the differences between implementations of inline SVG with the different charset, URL encode and Base64 encode: https://codepen.io/chriscoyier/pen/zEJtC
I have a nodeJS backend with a service to convert SVG files to PNG.
I used to use phantomJS to do that, and never had any problem, but performance was really bad.
I'm looking for a performatic way of doing this.
Right now I'm using RSVG, and it works perfectly except for fonts.
Currently we embed our fonts inside SVG file using something like this:
<defs>
<style type="text/css">
#font-face {
font-family: 'BoomBoom';
src: url('data:application/x-font-ttf;base64,[base-encoded font here]');
}
</style>
</defs>
In browsers this works perfectly, but RSVG does not seems to work with embedded base64 fonts.
Does anyone have a suggestion?