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
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.
I have an external svg file in my MVC project like this:
<object id="demo" type="image/svg+xml" data="/Content/images/demo.svg" style="width: 100%; height: 100%; display:block; right:0; position:absolute "></object>
There is only GET request in FF, ME and Chrome but if I open my project in IE 11, it makes HEAD and GET requests same time. I couldn't find how to avoid. Is it normal? or am I in trouble? Saying trouble, because that svg file size is approximately 4.5 Mb. Network monitor looks like :
File Protocol Method Type Transferred Cause
---------------------------------------------------------------
demo.svg HTTP/2 HEAD image/svg+xml 4.55 MB -
demo.svg HTTP/2 GET image/svg+xml 4.55 MB document
UPDATE-Workaround:
Well, i found an odd way. In fact a bit lagging while trying to get DOM elements but still better than make people download extra 4.5Mb every visit, right ?
I removed object element, loaded svg file via XMLHttpRequest object and set the content of a div with responseText(returns whole svg file as text) property. Inevitably a loading image added just before call function to say: "hey it's gonna be lag for a sec don't worry."
By the way, i tried to use Blob object to create url for <object> element's data attribute but it doesn't work in IE with <object>.
I still want to know how to prevent HEAD request in IE.
This is because of <object>. Try using <img> instead:
<img src="/Content/images/demo.svg" style="width: 100%; height: 100%; display:block; right:0; position:absolute ">
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?
I'm attempting to move from font icons (icomoon.io) to SVG sprites. Is it possible to use SVG sprites without needing < svg > markup for each icon instance?
What I really liked about the font icons was that I didn't have to clutter my HTML with any additional elements to get the icon to display. I usually just targeted a simple class on whatever element I wanted the icon to display and then used pseudo selectors to display the icon, e.g.:
<h1 class="news">News</h1>
h1.user:before {
font-family: 'icons';
content: '\news';
}
That made a lot of sense to me, and all of my icons were easily managed almost completely in CSS. I rarely had to touch my HTML as long as my markup contained appropriate classes.
I've since switched my build system to Grunt and thought I'd give SVG sprites a try. Almost every1 article2 I3 can4 find5 on the subject says you need to add an additional SVG element to your markup wherever you want each instance to display, e.g.:
<h1>
<svg class="icon">
<use xlink:href="#icon-news">
</svg>
News
</h1>
That seems like a step backwards to me, at least in the management of markup. To me, an icon is usually presentation that should be separate from document structure. Are we doing it this way simply because of the state of SVG support in browsers?
Ideally, I'd love to be able to do something like this:
<h1 class="news">News</h1>
h1.news:before {
display: inline-block;
width: px;
height: px;
background: url(icons.svg#news) no-repeat;
}
This post seems to be closer to what I'm looking for, but I'm not sure of browser support and how to do it automatically in a build system like Grunt.
SVGs can be loaded as files exactly the same way as other images using <img> tags or CSS background, and can be used as sprites exactly the same way too. The only difference is that you have to specify the size you want it (because it's scalable, so the browser doesn't automatically know how big it is like it does with PNGs).
Depending on how you want to use the image, loading them this way may or may not be suitable as some SVG features aren't available, but it can be done.
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.