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
Related
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.
I have svg icons, but in Safari they simply don't appear.
I was looking 2 hours for the answer and couldn't figure out how to fix it so far.
I believe something wrong with my svg files, because I was trying using other svg files and they worked.
SVG icon sample
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?
I am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.