I am working on an svg export utility for a drawing program on android. I am having a problem that the behind blur is cutoff past the shape boundaries - looks like i need to resize the viewBox or increase the margin or something. Does anyone know the best way?
The test file url is here - it downloads as the mime type isn't setup correctly on the server and I cant restart it at the moment :(. There are embedded images and fonts in the file, Which is why it's big. But if you save it to disk you can open in chrome, ff, etc...
An enlarged example of this problem is given. Notice the square edges on the orange glow.
Go to Filter > Blur > Gaussian Blur, and the Gaussian Blur window will appear. You can drag the image in the Gaussian Blur window to look for the object you are going to blur. If you find it too small, tick the Preview box, and the result of the Gaussian Filter blur will be visible in the image.
Step 1: Select the image or object. Step 2: Go to the overhead menu Effect > Stylize (under Illustrator Effects) > Feather. Step 3: Adjust the radius and click OK. The higher the value, the more it blurs.
You need a larger image to get higher quality, there's no way around it. If you have a 300 x 300px image and you shrink it to 64 x 64px, it will look pixelated. There are not enough pixels to contain the same amount of detail as the larger version.
The filter canvas has default values : x=y=-10% and width=height=120%. You can change them with the x, y, width and height attributes on the filter element.
Try to set a bigger canvas :
<filter x="-50%" y="-50%" width="200%" height="200%"/>
Yet, since the canvas is bigger, there will be performance loss.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With