I want to draw a blurred circle in svg, but with some higher stdDeviation values, it will be cropped.
I tried several attributes like "edgeMode" on the "feGaussianBlur" tag or 'width="150%"' and 'height="150%"' on the "circle" and "filter" tag, but nothing helps.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
</filter>
</defs>
<circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>
Adjusting the filter's x, y, width and height is all that's required.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="f1" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
</filter>
</defs>
<circle cx="100" cy="100" r="30" fill="#ff0000" filter="url(#f1)"/>
</svg>
Related
I want to create the shadow of an circle, while leaving the centre of the circle transparent.
I can't work out how to do it. I've tried using masks and filters, but they seem to cancel each other out. The mask cuts off the filter.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" >
<defs>
<filter id="blur">
<feDropShadow dx="0" dy="0" stdDeviation="4.5"
flood-color="black"/>
</filter>
<mask id="circle-mask" x="0" y="0" width="1" height="1">
<circle cx="75" cy="75" r="50" />
</mask>
</defs>
<circle cx="75" cy="75" r="50" style="mask: url(#circle-mask) filter: url(#blur)"/>
</svg>
I've tried used a circle as a clipPath, but that clips everything outside the circle (I want to clip the inside). I've tried messing the groups, putting the mask on the group and the filter on the circle (and the other way round). I've tried putting the mask and the filter into a style.
I'm not getting anywhere. How do I make the inside of the circle transparent?
You can do this in a compact way by extending your filter. The additional feComposite/out will remove anything that overlaps with the original shape (assuming your shape is always fully opaque).
body {
background: grey;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" >
<defs>
<filter id="blur-out">
<feDropShadow dx="0" dy="0" stdDeviation="4.5"
flood-color="black"/>
<feComposite operator="out" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="75" cy="75" r="50" filter= "url(#blur-out)"/>
</svg>
Just make the mask bigger. You'll need to make the bits you don't want to mask white and the bits you do black.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" >
<defs>
<filter id="blur">
<feDropShadow dx="0" dy="0" stdDeviation="4.5"
flood-color="black"/>
</filter>
<mask id="circle-mask" x="-0.2" y="-0.2" width="1.4" height="1.4">
<rect width="100%" height="100%" fill="white"/>
<circle cx="75" cy="75" r="50" fill="black"/>
</mask>
</defs>
<circle cx="75" cy="75" r="50" style="mask: url(#circle-mask); filter: url(#blur)"/>
</svg>
I have this code in which I want to add a feGaussianBlur to a <rect/> element:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<filter id="f">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>
The output is rendered like this:
As you can see, that the sides are not softened. The sides have a hard border.
But, when I decrease the value of the stdDeviation, it works well. Here is the output if the value of stdDeviation is set to 10:
Why is it not working properly with a value greater than 10? And what can I do to achieve it?
Expand the filter region
x="-20%" y="-20%" width="150%" height="150%"
See Filter effects region
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<filter id="f" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>
I'm trying to apply a texture to an image
Original
Texture
Result (made with PHP GD)
But with SVG, the closest I got is this result
<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
<defs>
<filter id="texture">
<feImage href="https://i.imgur.com/pjWcnJs.jpg" result="texture-img"/>
<feBlend in="SourceGraphic" in2="texture-img" mode="multiply"/>
</filter>
</defs>
<g>
<g filter="url(#texture)">
<image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
</g>
</g>
</svg>
fiddle
Is there another way which won't texturize transparent pixels?
I found a solution which is to pass the texture through a composite filter which would crop it to the source image
<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
<defs>
<filter id="texture">
<feImage href="https://i.imgur.com/pjWcnJs.jpg" result="texture-img"/>
<feComposite in2="SourceGraphic" operator="in" in="texture-img" result="composite"/>
<feBlend in="SourceGraphic" in2="composite" mode="multiply"/>
</filter>
</defs>
<g>
<g filter="url(#texture)">
<image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
</g>
</g>
</svg>
To tile the texture, I used feTile like this
<svg preserveAspectRatio="none" width="500" height="500" viewBox="0 0 500 500">
<defs>
<filter id="texture" x="0" y="0" width="100%" height="100%">
<feImage href="https://i.imgur.com/gWH7NLm.jpg" result="texture-img" width="256" height="256"/>
<feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile" ></feTile>
<feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"/>
<feBlend in="SourceGraphic" in2="composite" mode="multiply"/>
</filter>
</defs>
<g>
<g filter="url(#texture)">
<image x="0" y="0" href="https://i.imgur.com/oVEdsQt.png" opacity="1" width="500" height="500" />
</g>
</g>
</svg>
I got the idea by checking how inkscape applies material textures
I have this dummy svg showing a cirle with some grey figure inside
<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-585.000000, -391.000000)">
<g transform="translate(585.000000, 391.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
<g transform="translate(21.500000, 27.823529)" id="Page-1">
<path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
</g>
</g>
</g>
</g>
</g>
when I convert it to a sprite using gulp-svg-sprite with mode symbol I get this result
<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>
Now the grey figure breaks out of the circle and this even happens if I copy root defs- and g-tags from my original svg directly into the symbol-tag. I have also tried inserting a clipPath in the symbol version but with no luck.
What am I missing here?
UPDATED: Simplifying your svg may work ... try with the examples below, one using symbols, one without (in case the gulp sprite code cannot have nested symbols) ... it may be an issue with the defs area.
svg {
width: 100px;
}
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c">
<circle cx="43" cy="43" r="43" fill="currentColor" />
</symbol>
<mask id="mask" color="#fff">
<use xlink:href="#c" />
</mask>
</defs>
<use xlink:href="#c" color="#666" />
<path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2" color="#fff">
<circle cx="43" cy="43" r="43" fill="#FFF" />
</mask>
</defs>
<circle cx="43" cy="43" r="43" fill="currentColor" />
<path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>
It is probably not a complete answer but I managed to get it work;
First I extended my defs with a clipPath using my circle
<defs>
<circle id="circle" cx="43" cy="43" r="43"></circle>
<clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>
Then, using the clipPath on my first group and switching from gulp-svg-sprite to gulp-svgstore (which moves the defs to the top, above the symbols) gives me what I expect both as single svg and as an svg symbol sprite.
I'm trying to use a external symbol with a filter. Unfortunately it looks like the browsers don't support this feature.
Am I declaring it wrong or hasn't it been implemented?
Example page: http://www.lisa.ink/svg/
Chrome only shows the last svg
Firefox shows the first and second svg as expected
Safari only shows the last svg as expected
1. Using external symbol with only a fragment identifier
html:
<svg>
<use xlink:href="/svg/rect.svg#rect" />
</svg>
external svg:
<svg>
<defs>
<filter id="hueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
<symbol id="rect" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(#hueRotate)" />
</symbol>
</defs>
</svg>
2. Using a external symbol with a full IRI
html:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/svg/rect.svg#rectWithFullUrl" />
</svg>
external svg:
<svg>
<defs>
<filter id="hueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
<symbol id="rectWithFullUrl" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(/svg/rect.svg#hueRotate)" />
</symbol>
</defs>
</svg>
3. Using a external symbol with local
html:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/svg/rect.svg#rectWithMissingFilter" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="missingHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
</defs>
</svg>
external svg:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="rectWithMissingFilter" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(#missingHueRotate)" />
</symbol>
</def>
</svg>