I have encountered some strange behavior with SVG images in webkit based browsers. They are shown in Firefox and Chrome Canary but in Chrome 28.0.1500.71 and Safari 6.0.5 a transparent SVG image is shown instead (or the image is not correctly loaded). When I right-click the SVG image URL in the inspector and open it in a new tab, though, the image is displayed correctly.
Here is my sass:
[role="banner"] {
background: image-url("svg/header.svg") 15px top no-repeat;
}
The paths are correct and also the CSS. I double-checked it. Any ideas what the problem could be?
Related
I’m working with an SVG on a website, and everything works fine except in Safari. Safari displays my SVG with a completely different font than what I used for the graphic.
Correct Rendering
This is how it’s supposed to display.
Safari Rendering
This is how Safari renders it.
I don’t have a lot of experience with using SVGs in web design, but I’m using CSS to set it as a background-image like I would anything. I can’t figure out what I’m doing wrong.
.titleContainer{
background-image: url(‘../img/logo.svg’)
}
This is most likely because you should "convert to outline" when you export the SVG from your design program. I could imagine that you selected to embed the font.
Ie in Adobe Illustrator you have the option to outline the font when you export:
Adobe Illustrator example
I've build a simple web page which includes a background image in the body tag and the background-size is set to cover in css file.When i resize my chrome window the original image gets displayed adjacent to same image and so on just like a collage.How can i solve this issue?
Add following CSS code to your stylesheet
background-repeat: no-repeat;
In desktop version of Firefox (version 56.0), the SVG image was displayed incorrectly.
For example, with the following SVG image for twitter logo, it shows something that not even close to twitter logo. The same SVG image is displayed properly in other browsers, (IE11, Edge, Chrome, etc.). Is this a bug in Firefox? or there is a workaround to make it work? (two screenshots for working and not-working pages in attachment)
<img style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1%2Cc-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5%2Cc-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1%2Cc0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7%2Cc0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E" />
Working SVG in Chrome
Not-working SVG in Firefox
Your path is invalid. Commas are only allowed between numbers so -2.1,c is invalid and a UA should stop parsing there. Firefox is correct and the other UAs are not per the SVG specification.
If you decoded the data URL to a file and viewed the file directly you'd have seen the error logged in the Firefox console.
Removing the invalid commas fixes things. If this SVG was produced by a tool you should get the tool fixed.
<img style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1c-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5c-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1c0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7c0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E">
My svg image renders on it's own, but will not display on lightbox. In other words, if you click the link, lightbox opens up but NO image. If I replace the svg with a png version, it shows. And like I said before, if I stick the svg image anywhere else on the site without using lightbox, including opening it on a page by itself, it renders perfectly. Are there any svg limitations with lightbox that I'm not aware of?? Thanks!!!
I use Photoshop to export svg which works fine when used inside img tag in Firefox but fails in Chrome i.e. nothing shows up.
I have exactly the same problem as this question:
Chrome not rendering SVG referenced via <img> tag and using Adobe Illustrator and opening the .svg file and saving as embed does solve the issue.
So the seleced solution does solve my problem too but it requires Adobe Illustrator.
Since I don't need Adobe Illustrator for anything else, I wanted to know if there is an alternative?
http://jsfiddle.net/2x00wmxy/
<img src = "http://imgh.us/testsvg_1.svg" />
Try the jsfiddle in Chrome and Firefox and you'll see the difference.