Bitmap in SVG not rendering in Safari - css

In this project:
https://test.restaurantacasa.cat/
I use vectors as restaurants logos. In some of them, I include (embed in the svg) a bit of bitmap, for an example, here:
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
However, if you open that one in Safari (mobile or desktop), you'll notice that the bitmap section is not rendered.
Can you help me understand why?
I produce the vectors with Adobe Illustrator.


Have you tried using <object> to embed your SVGs, instead of <img>? <object> elements don't have the same restrictions on external references that <img> does.


This is a known bug with Safari.*
When you use SVG as an <img>, external files such as embedded images are not loaded (in any browser). To get around this restriction, Illustrator converts embedded images to data URI values, so that all the data for the embedded image is stored in the SVG file.
For most browsers, this is enough. However, Safari treats the data URI value the same as any other URL referencing an external file, and does not process/load it.
* Scroll down the comments on the linked bug report, it took people a while to figure out what the problem was! The main discussion starts around comment 16.


I also had this issue and found a solution which I thought was worth posting here.
I was embedding the SVG as an object:
<object data="path_to_file.svg" />
and the object was including the image as:
<image href="raster.png" />
This worked everywhere except Safari. I found out that the proper syntax to use is this:
<image xlink:href="raster.png" />
Furthermore, if you are javascripting, it's not sufficient to just setAttribute() you need to setAttributeNS() like so:
el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")
Also, be sure to include the xlink NS at the top of the SVG file in the SVG tag:
<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>
(based on info I found here)

Related

CSS support for inkscape's PDF to SVG conversion

converting a PDF page to a SVG document works OK with inkscape.
However I noticed that many style elements are heavily duplicated in the output SVG.
I noticed that embedding CSS into SVG seems to be possible using inkscape's UI.
Does anyone know if (and how) this CSS conversion can be called from inkscape's command-line (or through some inkscape API) as well?
Kind regards,
Marius

In a standalone SVG file, is it possible to position one object relative to another using only CSS?

Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and I’d rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing — please do tell about them.
3) SVG code backup: pastebin.

Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.

Is there a polyfill for SVGs used as CSS backgrounds?

I would like to use SVG and not to have to create a PNG fallback every time. Is the an easy solution to this problem? I have looked at these projects but can't tell whether they support it:
http://sie.sourceforge.jp/
http://code.google.com/p/svgweb/

try GruntIcon - http://github.com/filamentgroup/grunticon
grunticon takes a folder of SVG files (typically, icons that you've
drawn in an application like Adobe Illustrator), and outputs them to
CSS in 3 formats: svg data urls, png data urls, and a third fallback
CSS file with references to regular png images, which are also
automatically generated and placed in a folder.
grunticon also generates a small bit of JavaScript and CSS to drop
into your site, which asynchronously loads the appropriate icon CSS
depending on a browser's capabilities, and a preview HTML file with
that loader script in place.

There's quite a number of SVG polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#svg
Please try them and update your initial question with the results for each.

CSS using svg as background, external pattern doesn't load

If I put the SVG like an object it works fine (only console errors on chrome about mime types etc): www.bunquer.com
I want to put this like a background, but in that case the pattern inside the mountains doesn't loads why?
http://bunquer.com/tests/svg/
Thanks in advance

When SVG is used as an image the SVG file must be self-contained for privacy reasons. See https://bugzilla.mozilla.org/show_bug.cgi?id=628747 for more details and reasoning.

Is it possible to add SVG images to a web page through CSS?

I just started experimenting with SVG in web pages, and I discovered that it is only possible to add SVG images into HTML using <object /> tags, not <img /> like I would have expected. Most of the time, I add graphics to web pages through CSS because they are part of the presentation of the site, not the content.
I know it is possible to apply CSS to SVG, but is it possible to add a vector image to an HTML element using purely CSS?

SVG is supported in <img> and in CSS (list-image, background-image, content) since Opera 9. Opera 10 is better still. Webkit/Safari supports svg in <img> too.
Some examples here, a couple more at dev.opera.com and annevankesteren.nl
If you're looking for inline svg examples, have a look at Sam Ruby's site.

You can try to reference an SVG file with the content property, but I don't think it's supported. If it was supported it would look like this:
.putapicturehere:before {
content: url(mysvgfile.svg);
}
This definitely won't work in IE - it might work in the newest Firefox.
I always reference quirksmode.org for css browser support questions.

You might need to make a little CSS-helper JavaScript to read the image out of an offscreen img and put it into your object tag. That way you can still control with CSS.

As far as I know, Opera 9 and WebKit (== Safari & Chrome) do it on PCs, and rumour has it, that FF3.5 will also be able.
Actually, since Apple added SVG support to iPhone's Safari just half a year ago, I'm not sure, if it works, but it's worth a try.
Cheers,

Last time I tried, almost a year ago, it didn't work. You can, however, already mix svg and xhtml markup. Only problem there is that the page has to have correct mime type (application-xml or something like that) or browsers will ignore the svg.
Inline svg is not a perfect solution if you want strict separation of content and presentation, but is seemed to be the most supported way of using svg.

Resources