I am fairly new to SVG, and the part that always confuses me is the size of the SVG and the clipping at the edges. I have an SVG square in the below checkbox art I was trying to add a dropshadow to:
Turned out the code to do this is simple; but the right edge is clipped off. I tried various combinations of widths and such, no luck. What am I missing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<defs>
<filter id="blurFilter" y="-5" height="40">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" />
<feGaussianBlur in="offset2" result="blurredRect" stdDeviation="2" y="-"/>
<feMerge>
<feMergeNode in="blurredRect" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g width="30" height="30" stroke="#00B140" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" >
<rect x="2" y="2" height="20" width="20" style="stroke: #3E53A4; fill: none; stroke-width=2px;filter: url(#blurFilter);" />
<path id="check" d="M21.542 11.271l-9.063 8.458-3.021-3.021"/>
</g>
</svg>
</body>
</html>
you need to set width on the filter:
<filter id="blurFilter" y="-5" height="40" width="40">
fiddle
for an explanation you can look into filter feOffset definition;
shortly the reason is this filter primitive offsets the input image relative to its current position in the image space by the specified vector.
updated fiddle based on Holgerwill's comment
Related
I try to generate SVGs that are composed of filters and I would like to have exactly the same rendering when the same image is resized (with ratio kept).
I use two filters: feTurbulence and feDisplacementMap
My problem is that I can't get the same rendering when the same image is resized.
I was hoping that it would be enough to change the values of the attributes of the effects proportionally but it doesn't work.
In this case, if I change the "scale" and "baseFrequency" values proportionally it doesn't work.
How can I calculate the values of "scale" and "baseFrequency" to get exactly the same rendering whatever the size of the image?
IMAGE 1 - 300x132px
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="132">
<defs>
<filter id="filter1" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse">
<feTurbulence baseFrequency="0.05" result="NOISE" type="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" result="RESULT" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
</defs>
<image x="0" y="0" width="300" height="132" href="https://i.stack.imgur.com/osUI3.png" filter="url(#filter1)"></image>
</svg>
RESULT 1:
IMAGE 2 - 600x264px (x2)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="264">
<defs>
<filter id="filter2" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse">
<feTurbulence baseFrequency="0.05" result="NOISE" type="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" result="RESULT" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
</defs>
<image x="0" y="0" width="600" height="264" href="https://i.stack.imgur.com/MNepH.png" filter="url(#filter2)"></image>
</svg>
RESULT 2:
We can see that the effect is different on RESULT 1 and RESULT 2.
The example is on this page: https://jsfiddle.net/qbvp8x1r/
If you use the same viewBox for both SVGs you get the same result. The viewBox defines the "inner coordinate system" for the image.
In this example I moved the filter to a separate SVG to show that it can be reused. To make the image fit in the SVG I set the width to 100%. So, everything is relative except the viewBox.
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter1" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse">
<feTurbulence baseFrequency="0.05" result="NOISE" type="turbulence" />
<feDisplacementMap in="SourceGraphic" in2="NOISE" result="RESULT" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
</filter>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="300"
viewBox="0 0 300 132">
<image width="100%" href="https://i.stack.imgur.com/osUI3.png"
filter="url(#filter1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="600"
viewBox="0 0 300 132">
<image width="100%" href="https://i.stack.imgur.com/SS7N6.png"
filter="url(#filter1)" />
</svg>
Why is setting an svg viewBox to say 0 0 1 1 causing my filter to disappear? I also tried playing around with x, y, height, and width attributes as well as changing primitiveUnits attribute, nothing did work. Any help would be appreciated.
svg {
border: 1px solid red;
height: 100px;
width: 100px;
}
svg circle {
fill: black;
}
<html>
<body>
<svg viewBox="0 0 1 1">
<defs>
<filter id="halo1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
</svg>
<svg>
<defs>
<filter id="halo2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
</svg>
</body>
</html>
Fiddle playground: https://jsfiddle.net/6x34urzg/14/
When the image is scaled from 1x1 (the viewBox="0 0 1 1") to 100x100 px the standard deviation (stdDeviation="3") is also scaled. The circle with the filter is still there but 100 time too big.
If you set the standard deviation to 1/100 (stdDeviation=".03") you will get the same result as the other SVG.
svg {
border: 1px solid red;
height: 100px;
width: 100px;
}
svg circle {
fill: black;
}
<html>
<body>
<svg viewBox="0 0 1 1">
<defs>
<filter id="halo1">
<feGaussianBlur in="SourceGraphic" stdDeviation=".03" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
</svg>
<svg>
<defs>
<filter id="halo2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
</svg>
</body>
</html>
Actually, in the CSS you know insert CSS to HTML like Internal CSS and Inline CSS. Internal CSS is you write css on in inside on tag and that tend general for use to give style on SVG. While, Inline CSS used to write css on unique element on tags like your program(coding). Although you have writenn css svg, your svg on "Hallo1" disappear because your program have write inline CSS viewBox="0 0 1 1"make your svg "Halo 1" disappear. Moreover, viewBox="0 0 1 1" make your circle dissapear because weight=1 and height=1 so that cirle which resulted so small and you cannot see that. To solve that problem you can change your viewBox become 'viewBox="0 0 100 100" '
I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains the same size.
Codepen Demo
This is the SVG code:
<svg height="100" width="100">
<defs>
<clipPath id="svgPath">
<path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" />
<path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" />
<path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" />
<path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" />
</clipPath>
</defs>
</svg>
Firts, when you set the width and height attributes to 100, it makes the svg 100px high and wide. If you want the svg to be full width, you need to give it 100% width.
Second, as commented by #Paulie_D you need to give a value to the viewbox attribute to provide a scale and coordinate system for the elements in your svg. Here is an example with viewbox="0 0 500 500" and width="30%" :
<svg viewbox="0 0 500 500" width="30%" >
<defs>
<clipPath id="svgPath">
<path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" />
<path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" />
<path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" />
<path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" />
</clipPath>
</defs>
<image xlink:href="http://i.stack.imgur.com/3DR2G.jpg" x="0" y="0" height="500" width="500" style="clip-path: url(#svgPath);"/>
</svg>
Output :
I've been attempting to apply a drop shadow to my SVG Path. I googled across the filter option which when applied to path by applying: -webkit-filter: drop-shadow( -5px -5px 10px #000 ); which didn't seem to get applied.
Here's a fiddle with my SVG path demonstrating the problem
Within your JSFiddle, I deleted your CSS and added a filter definition. It seems to work:
<svg width="100%" height="300px">
<defs>
<filter id="filter1" x="0" y="0">
<feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path>
</svg>
Maybe a few tweaks to the dx, dy, and stdDeviation values will get it just the way you want.
The SVG path usually looks like a solid line:
Is it possible to implement a hand-drawing (crayon) style for SVG path?
You can try something like this using svg's filter
<svg width="1000" height="500">
<defs>
<filter id="filter" height="2" width="2">
<feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="80" xChannelSelector="R" in="SourceGraphic" />
</filter>
</defs>
<path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>
If you don't want the edges clipped and want a more solid stroke, then you can tweak Akshay's settings by setting filterUnits in userSpace and reducing the displacement scale like so:
<svg width="1000" height="500">
<defs>
<filter id="filter" filterUnits="userSpaceOnUse" x="-5" y="-5" height="200" width="2000">
<feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="8" xChannelSelector="R" in="SourceGraphic" />
</filter>
</defs>
<path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>