I'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:
<svg width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="48" height="48"
xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
transform="scale(5.0)" />
</svg>
As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.
Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)
Is there any way to ensure that the nested SVG is never rasterized before scaling ?
Thanks :)
JSFiddle: http://jsfiddle.net/a9NRY/17/
This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.
Related
I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:
clip-path: url(#aqua-dot-mask);
https://codepen.io/rberneder/pen/pojaNex
I tested the effect in Chrome, Firefox and Safari. The first two browsers are presenting what I want to achieve, but Safari has real troubles and glitches.
It seems Safari still has no full support of the clip-path property, but it should be capable of this particular one.
https://caniuse.com/#search=clip-path
Any ideas?
Thanks #Robert for your help. The solution I came up with is to just put the img tag as image tag into the SVG.
Instead of:
<img src="..." style="clip-path(#mask)" />
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
</svg>
I now have:
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
<image href="..." style="clip-path: url(#mask);" />
</svg>
https://codepen.io/rberneder/pen/xxwYmOj
This works for me.
So I've recently encountered this warning
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
Doing as much research as I could, I keep finding excuses about replacing SMIL with web animations (which SMIL is if we're being technical) but this all involves JavaScript and CSS. I use animated SVGs in <img> tags because that's the point of the SVG format: it's an image.
This was really nice and all because it allowed me to at least organize my images on a web that's notorious for being a giant mess (e.g. JavaScript has no imports so you have to fill the global scope).
Now that I can't animate with SVG, is GIF the only option for self-contained animations?
SMIL is not as dead/deprecated as you believe it is. The Chrome developers recently posted this:
We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
In SVG2, most of the SMIL functionality should be available through CSS animations.
But these are still in draft, and only chrome has started implementing some.
Also, chrome message is just a deprecation message, it' not removed yet from this browser, and I doubt other browsers supporting it will remove it any soon.
Anyway, you can already achieve SMIL like animations on browser not supporting it (e.g IE) thanks to javascript polyfills like fakesmile.
Unfortunately, scripts in svg documents loaded through the HTMLImage element (<img>) won't run. So you have to switch from the <img> tag to the <iframe>, <object> or <embed> tags. These tags do allow the execution of scripts, so you just have to import the polyfill in your svg document, and then load your image as you would do within an <img> tag.
Here is an example that will work on IE :
SMILTest.svg
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML"
attributeName="x"
from="-100" to="120"
dur="10s"
repeatCount="indefinite"/>
</rect>
<script xlink:href="https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js"></script>
</svg>
index.html
...
<object data="SMILTest.svg"></object>
...
Live example
If all your svg images are served from the same domain as your main page, you could also automate it with something like that :
window.addEventListener('load', function(){
var obj = document.querySelectorAll('object[data*=".svg"],iframe[src*=".svg"],embed[src*=".svg"]');
Array.prototype.forEach.call(obj, function(o){
var doc = o.contentDocument;
var s = document.createElementNS('http://www.w3.org/2000/svg','script');
doc.documentElement.appendChild(s);
s.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js');
});
});
Live example
I'm writing a web application which generates SVG images in the browser.
The SVG's I'm generating work fine in ever browser. However, when I download one of the SVG's and try to open it in Adobe Illsutrator, all the transformations are all over the place.
They are in fact so different that you have to zoom right out to see where the shapes are positioned.
This is the contents of the SVG, you can see it's pretty simple. Just a couple of nested SVG's and a few basic shapes:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="592" height="592" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="overflow:visible;" x="88.80000305175781" y="88.80000305175781" fill="#777777">
<svg style="overflow:visible;" height="100px" width="100px">
<rect width="100" height="100" style="stroke:#006600;" transform="scale(4.144 4.144)"></rect>
</svg>
</svg>
<svg style="overflow:visible;" width="592" height="592" x="176.60000000000016" y="177.60000000000014" fill="#000000">
<rect width="592" height="592" fill="rgba(0,0,0,0)" stroke="#bbbbbb" transform="scale(0.4 0.4)"></rect>
<svg style="overflow:visible;" x="-0.0000015258789005656581" y="-0.0000015258789005656581">
<svg style="overflow:visible;" height="48px" width="48px">
<ellipse id="SvgjsEllipse1010" rx="24" ry="24" cx="24" cy="24" style="stroke:#006600;fill:#00cc00;" transform="scale(4.933333333333334 4.933333333333334)"></ellipse>
</svg>
</svg>
</svg>
</svg>
I don't know the SVG spec inside out, but I'm doing anything particularly complex, so it all seems good to me. I can't see a reason why Illustrator would render it so differently to browsers.
Does anyone know why this is happening?
Edit
This is what it looks like in Illsutrator, as you can see the scaling and positioning is all off, the small square in the center is the 592 x 592 canvas area, so you can see who far I am zoomed out.
I suspect AI doesn't like/handle/expect nested <svg> elements. Try replacing them with groups. Those with x and y attributes may need to have a transform added to get it to look the same. Also if the overflow is important, you may need to tweak things further as that property is not valid for group elements.
Dear Stack Overflow,
I am trying to reference individual SVG graphics which reside in different SVG files
via the tag and ID numbers in a master HTML5 page.
I want to be able to put onclicks on the use tags in the HTML page in order to
make a multiple choice quiz (and then keep a score which I know how to do),
The graphics are going to be bulky. Therefore, these need to be in an external svg files.
Here however, I have used a simple rectangle to make my question easier to
follow
Here is my HTML
<html>
<head></head>
<body>
<svg>
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>
and here is My SVG
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
<rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>
This works exactly the way I want it to in Firefox and Opera.
However, it does not work in Chrome or Safari. Not sure about Internet Explorer
Is there an alternative method that will allow me external access to the
SVG data, and scripting from the main HTML page (because I want can keep a score
over multiple SVG elements)
You could access your SVG by using an <object> tag. This link shows you how to script from html to SVG and vice versa.
I'm trying to create an SVG document that includes image tags referencing png files. This works if I include the absolute path of the png in every image tag but if I try putting an xml:base attribute in it doesn't seem to work in IE9. However it does seem to work Firefox and Chrome. Is there a bug in IE or is there something wrong with my syntax?
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:base="file:///C:/SVG/Devices/valves/">
<image width="40" height="56" x="10" y="10" xlink:href="motorised_valve[purple].gif"/>
</svg>
For complicated reasons I don't want to go into here, I can't put the SVG document into the same folder as the images.
Thanks for any help
Mog
Would it be acceptable in your case to embed your PNG images in your document using the data:// protocol? That would solve your problem, at the expense of potentially making the XML rather large.