I've got a collection of SVG's that were generated by taking a corresponding collection of PNG's, live-tracing them all in Adobe Bridge, saving them as AI, and converting those AI files to SVG's using Adobe's builtin scripts.
The shapes in the SVG's turned out fine -- however, somewhere in the process a bunch of extra padding was added to the sides of the images. To be more precise, the height and width properties of the itself as well as the dimensions of the viewBox are much larger than the shapes they contain.
Are there any solutions (ranging from string substitution in the .svg's to fancy Adobe scripts) to automatically set the dimensions of the viewBox fit only the shapes, or otherwise crop the SVG to achieve the same effect?
I'm new to SVG, so let me know if there's additional information that could be helpful.
Thanks
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
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've been using inkscape to create SVGs. But I've come across a problem. I've created a simple plus sign with a 1px line width (as simple as you can imagine). It is currently in PNG format with a transparent background. I've imported it into inkscape so I can convert it into a SVG. However, when I use trace bitmap, Inkscape CHANGES THE SHAPE such that the straight lines that are one pixel wide are tappered with pointed ends! I've tried different options in the trace bitmap settings but nothing seems to work. I've also gone through a number of online free conversion sites with no luck.
I wouldn't mind just creating the plus sign using html and css but the exact position of the lines as well as the line thickness tends to move around between chrome and firefox. It's very strange.
..Help?
I think I figured it out. If I create a plus sign that is 2 px thick instead of 1 px thick, inkscape does not do its smoothing thing (as long as I have unticked smoothing options). So, I do this, but draw it much bigger than what I need. Then when I load it into my website I can reduce the size of it there, and voila the 2 px width becomes 1 px width!
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.
I have an application that needs to apply some transformations to text (including non-affine transformations). Does anyone know of a toolkit (or group of tools) that would let me bring in a True Type or Postscript Font, get the glyphs as outlines, then apply transformations to the outlines and render it as a bitmap or svg file ? Flash won't do non-affine transformations so it is out. Illustrator has a function which converts text to outlines, but Illustrator scripting is very unstable so I can't really use it for this. Thanks for any help.
You could use the Batik TTF to SVG Font converter. The SVG font format uses the same path data format that the SVG <path> element uses.
For example, this is the output from converting Gentium Basic Regular using the above tool. With the right coordinate system, you can just grab out the path data, transform it however you like, and then draw it with a <path>. Note though that the glyph coordinate system in SVG fonts is actually inverted, with the (0,0) at the bottom left corner of the glyph cell box, compared to the regular SVG canvas which has (0,0) at the top left corner. So don't forget to flip the glyph, e.g. by putting transform="scale(1,-1)" on the <path> you use to render the glyph.
Once you have the SVG document that renders the glyphs as shapes you can convert it to a bitmap using your favourite tool. (Batik can do that too.)
While Batik is a good answer, it will convert only TrueType fonts to SVG Fonts. If you have OpenType fonts, and they more and more dominate now, you can use FontForge to get an SVG Font for these. Another advantage of using OpenType is that the produced SVG uses not only quadratic but also cubic Beziers in the path which is more effective.