I tried the below code and noticed in IE11, the second circle did not appear at all. Once I removed the filter="url(#blurMe)" from the second circle tag, I was able to see the green second circle.
Is it correct that IE11 does not support this feature? Are there alternate ways of achieving this?
I looked at the documentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter and it showed unknown compatibility.
Thanks.
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green"
filter="url(#blurMe)" />
</svg>
Your code works fine on the IE 11 browser and I can see the 2 circles with your above-posted code.
Test code:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5"/>
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green"
filter="url(#blurMe)" />
</svg>
</body>
</html>
Output on the IE 11 browser:
Make sure that you are using the exact code that you had posted above.
Try to clear the cache and again try to test the issue.
If the issue persists then please try to provide more information about the issue like which exact version of the IE 11 browser and which OS build you are using for making this test? Is any other code available on the page?
Related
If I use 'SourceGraphic' as in2 inside feDisplacementMap, things looks good. However, if I use anything else, the deformation is not applied.
Because of that, I have to define the deformation source first, and then apply the filter to the deformation source, which is quite counter-intuitive, at least for me.
For example, in the example below I have to define the circle and then apply the filter to the circle. Inside the filter I use feImage to load the kitten image. But that feels reverse to me. This works:
<svg>
<defs>
<filter id="displace">
<feImage href="https://placekitten.com/500/500" result="kitten" />
<feDisplacementMap
scale="10"
xChannelSelector="R"
yChannelSelector="R"
in="kitten"
in2="SourceGraphic"
/>
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="#f00" filter="url(#displace)" />
</svg>
As you can see, applying a displacement to a small part of an image becomes quite painful, as you have to first create the displacement map yourself, and it must have the same size as the image. Like this:
<g id="deformation-source" filter="url(#displace)">
<rect x="0" y="0" width={imageWidth} height={imageHeight} fill={neutralToDeformation} />
<circle cx="50" cy="50" r="50" fill="#f00" filter="url(#displace)" />
</g>
Also, applying 2 different deformations to the same image, requires you to put the objects that will cause the deformation, instad of doing something like this:
<image href="kitten-url" filter="url(#filter-1)" />
<image href="kitten-url" filter="url(#filter-2)" />
What I would like to be able to do is to load the kitten as an SVG image tag, and then apply the filter to that image, where I would load the circle inside a feImage making a reference to the object's id, which I would have previously defined inside the defs section. This doesn't work:
<svg>
<defs>
<circle id="displacement-source" cx="50" cy="50" r="50" fill="#f00" />
<filter id="displace">
<feImage href="displacement-source" result="displacement-source" />
<feDisplacementMap
scale="10"
xChannelSelector="R"
yChannelSelector="R"
in="SourceGraphic"
in2="displacement-source"
/>
</filter>
</defs>
<image href="https://placekitten.com/500/500" width="100" filter="url(#displace)" />
</svg>
I'm not sure if I'm the one that's thinking this backwards or if I'm missing something. What's going on with this?
You can define your displacement source within the feImage, but it has to be an complete image defined as an inline URI in order to be cross browser compatible.
<feImage width="500" height="500" xlink:href="data:image/svg+xml,%3Csvg width='247' height='34'etc. etc.
Please see this article for more detail on how to escape characters in the svg+xml format - as far as I can remember there are some gotchas vs. vanilla HTML escaping.
If you don't care about Firefox, you can use a fragment identifier instead of inlining a whole SVG.
<feImage width="500" height="500" xlink:href="#idOfElementYouWantToUse"/>
Also remember that there are cross-origin security rules on displacementMap sources - so you can't displace an image using a map from another domain (or vice versa - I'm a little hazy on which way the restrictions run).
Really basic SVG question. I have read
SVG sprite in external file
and it works fine for me to add a svg graphic, but I can't get it to work with defs. First the file 'defs.svg':
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs id='patternDefs'>
<pattern id="pattern1"
x="2" y="2"
width="5" height="5"
patternUnits="userSpaceOnUse" >
<circle cx="2" cy="2" r="2" class="blue" />
</pattern>
</defs>
</svg>
and then the svg in a separate file:
<svg>
<use xlink:href="defs.svg#patternDefs"></use>
<circle cx="15" cy="15" r="50" stroke-width="2" stroke="red" fill="url(#pattern1)" />
</svg>
I am looking to get the fill="url(#pattern1)" part to work, as that is what is referencing the def in the external file.
Sorry if you think this has been answered elsewhere but I've read a ton of stuff and thought that if I could get the sprite version to work then why not a defs version. (I am very new to svg)
xlink:href="defs.svg#patternDefs" should be xlink:href="defs.svg#pattern1"
On top of that <use> has to point to something to be rendered, not a pattern. If you want to fill a circle with a pattern just set the circle's fill to the pattern. E.g.
<svg>
<circle cx="80" cy="80" r="50" stroke-width="2" stroke="red" fill="url(defs.svg#pattern1)" />
</svg>
Note that external fills are not widely supported, although they do work on Firefox for instance.
Link : http://jsfiddle.net/xkpeD/
or just
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"/>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
It displays ok in all browsers (IE9, Chrome, Firefox, Safari 5.1), but in new Safari 6 only 1 circle is rendered. Seems that all <use> tags doesn't rendered in Safari 6.
Any help please?
I had the same issue, OP. I solved it by doing 2 steps
Separated the <use> and the <defs> into 2 different <svg>'s (not sure if this step is necessary, also had to do it for other reasons). Side note, if an <svg> only has <defs>, you can use style="display: none;" to make it not take space in the layout.
Moved the <svg> containing the <defs> ABOVE the <svg> containing the <use> in my HTML. This step is crucial.
Hope this helps. Necessary and working for Safari Version 7.1.2 as of today, 12/19/14
sam.kozin's answer worked for me. Just so that this answer actually has visibility.
Replace <use ... /> with <use ...></use>
So:
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
<use xlink:href="#:example" x="20" y="20"></use>
<defs>
<circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
</defs>
</svg>
I was using <use href=""> that was rendering without issues in Firefox / Chrome, but not in Safari. So I had to change to <use xlink:href=""> and this fixed my rendering issues in Safari.
Check if you are using correct http content-type header and serving your document as valid XML. More info in this similiar question.
It seems that SVG filter effects are rendered strangely in Firefox on Mac OS. I came across this issue when trying to implement a drop shadow for a shape with a 1px stroke. I did some pixel snapping in Javascript along with a 0.5px offset and this makes the 1px stroke render crisply as long as there is no drop shadow.
However, when I apply the drop shadow with a filter effect the shape is blurry, but only in Firefox on Mac OS (I've tried Firefox and Chrome on Mac OS and Linux).
Here's some sample code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<!-- A trivial filter that shouldn't really do anything, to demonstrate a minimal case -->
<filter id="f1" x="-10%" y="-10%" width="120%" height="120%" filterRes="100">
<feMerge>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- A more representative example where this issue is annoying: a drop shadow -->
<filter id="f2" x="-10%" y="-10%" width="200%" height="200%" filterRes="100">
<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feMerge>
<feMergeNode in="blurOut"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Translating by 0.5 px so that 1px borders are sharp -->
<g transform="translate(5.5,5.5)">
<rect width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" />
<rect x="30" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f1)" />
<rect x="60" width="20" height="20" rx="2" ry="2" stroke="black" stroke-width="1" fill="white" filter="url(#f2)" />
</g>
</svg>
The svg looks fine in Firefox on Linux: (sorry I can't post inline images as a new SO user)
http://i.imgur.com/czKP2.png
and the same in Chrome on Mac OS (I can only post 2 links as a new SO user, so no link to the screenshot, but it's essentially identical), but the rects with the filter effects applied are blurry in Firefox on Mac OS:
http://i.imgur.com/7WxI8.png
I've tried several tweaks to no avail, including:
Using feBlend or feComposite instead of feMerge
Bumping up filterRes to browser-destroyingly high values
Any ideas?
(Apologies for not including a working demo -- I attempted to create a jsfiddle but it doesn't really work properly because the pixel snapping Javascript code doesn't work when the SVGs are in a frame the way jsfiddle does things.)
I'm trying to make the markers unified for a bunch of SVG images. My problem is that I cannot make external references in marker definitions work. It may be connected to question How to reference external svg file in svg correctly? but a link is still missing.
I made a little example to demonstrate my problem:
b.svg (which is referenced):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="b" r="6" stroke="black" fill="green" />
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#b" />
</marker>
</defs>
</svg>
a.svg (trying to reference b.svg):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="a" r="6" stroke="black" fill="yellow" />
<marker id="a_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#a" />
</marker>
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="b.svg#b" />
</marker>
</defs>
<path d="m 10,10 20,20" style="marker-end:url(#a_end)" stroke="black" />
<path d="m 40,10 20,20" style="marker-end:url(#b_end)" stroke="black" />
<path d="m 70,10 20,20" style="marker-end:url(b.svg#b_end)" stroke="black" />
</svg>
As you can see, I referenced the marker for the first line via an internal id (actually two since the marker has a reference, too). This works fine.
I used an internal marker definition with an external path for the second line. It doesn't work. (The line is diplayed, the marker isn't.)
I used an external marker in the third line. It doesn't work either.
The problem may be that the external content isn't in the hosting DOM - at least not when the reference in the style is resolved.
OK, but what can I do about it? How can I reference external elements for markers in SVG?
I think I can answer my original question based on my experiments and on the comment left by Robert.
The code I wrote should work in SVG and it does work with Opera and Firefox. Plus it works when generating a PDF with Apache FOP which was the key point for me.
The only problem is that external referencing doesn't work in IE, Chrome and Safari. I'm not sure when external references from style definitions were implemented in Firefox: it doesn't work in 7.0 but it works in 11.