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.
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.
Related
Me and my team have problems with generating bitmaps out of polygons. We've tried a few different solutions in order to generate polygons sufficiently fast and have found generating SVG paths and then using CairoSVG to be the best solution for us. We are using the even-odd rule to fill the polygons. I apologies if I'm describing everything in an incorrect way in terms of vocabulary, I'm new to SVG. The pathes are created as:
path_entry = f'<path fill="rgb{rgb_color}" fill-rule="evenodd" d="{svg_path}"/>'
With header
<svg
xmlnsXlink="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
style="color:green;"
>
We only allow the bitmap to have a set of color values. The value of a pixel should be that of the polygon which it's inside. A problem we've encountered is that the edges of the polygons "splits" pixels, i.e a pixel can be both on the edge/inside of polygon A and polygon B. See the image below where the edge between the black, green and grey area gets a mixed color.
We've currently solved this by finding each pixel that doesn't have an allowed color. We then use numpy roll to fill the value of these pixels with the value of its neighbours according to a solution found on this site.
for shift in (-1,1):
for axis in (0,1):
a_shifted=np.roll(bitmap_only_correct_colors,shift=shift,axis=axis)
idx=~a_shifted.mask * bitmap_only_correct_colors.mask
bitmap_only_correct_colors[idx]=a_shifted[idx]
The problem with this solution is thin diagonal polygons, 1-2 pixels thick. All pixels of these polygons get the mixed value and are therefor removed. This causes the thin polygons to be partly removed creating dotted lines instead of full lines, see the image below.
My question is: Can we solve this problem with the edges of the polygons not getting fixed values in another way? The best solution would be to add some kind of setting to the SVG-Document before generating the images.
Thank you!
Turn off anti-aliasing i.e. set shape-rendering="crispEdges" See the SVG specification for more details about this CSS property.
I'm drawing a simple chart with SVG, and I need the axes as sharp as possible.
The property shape-rendering="crispEdges" apparently works as expected, but resizing horizontally the window, both X and Y axes get blurred I'd say in the 50% of the cases.
Please take a look at this snippet and resize the window:
https://jsfiddle.net/Omiod/omak7t0c/4/
Looks like a Chrome bug as it works fine on Firefox.
Do you know any temporary fix?
I have an Easel.js-based canvas and a bunch of SVGs. When I put these SVGs on canvas as vector shapes and try to scale the whole canvas, some SVG contours become distorted / blurred.
Are there any ways to avoid such a behavior?
Problem:
SVG sample:
http://s000.tinyupload.com/index.php?file_id=88515840051764837348
EaselJS support in canvas is restricted to image-based rendering. Basically, it loads the SVG as a raster image. When you scale it, you aren't seeing it redraw the vector, but instead it scales like an image would. If you scale it above 100% it should be more obvious (it will get pixelly/blurry).
Not sure if you can work around this with an SVG source. You could bring paths into Adobe Animate, and export as raw EaselJS Graphics, which will scale more predictably.
Cheers,
I've a question about svg's viewbox, in my opinion it's like a window on an infinite svg plan, and its boundaries are set in the viewBox attribute of the svg element. It represents the rectangle between the 2 coordinates in the svg plan. So a viewBox of "0 0 1000 500" shows the window between (0,0) and (1000,500) of the svg plan.
And when I make viewBox (2000, 0, 3000 500) i see the window of (2000,0) and (3000,500). x and y scaling is unmodified: in both cases i'm displaying 1000 * 500 units of the svg plan.
But apparantly i go wrong some where. I'm experimenting with animating the viewbox to emulate some kind of ticker display, leaving the y coordinates untouched but changing the x coordinates (without changing the actual number of units displayed) but that goes wrong. Somehow my y-scaling changes.
In a modern browser you can verify yourself (pull the slider to change the viewBox).
What did I miss in the SVG specification?
You missed the preserveAspectRatio attribute in the SVG specification. It forces the aspect ratio of what you see in the viewbox to be preserved by default. Sounds like what you're after is preserveAspectRatio="none"
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.