Let's consider the simple following image in its SVG representation (running the code snippet will display it):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177 z"/>
</g>
</svg>
The SVG path is actually a collection of points all around the shape, while it could be a simple top-down slanted curve (the red line here). Unfortunately, I am provided these images, and cannot change them.
I am looking for a way to convert—or rather approximate—the SVG polygon to an SVG open curve., either directly or in several steps.
Any solution is welcome, but my preference goes to this order:
programmatically (so that I can script it);
using Inkscape or GIMP (or any other Linux program);
well, anything that would work.
Thanks,
Isn't it as simple as deleting the closing z from the path?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177"/>
</g>
</svg>
Or are you looking for something more complicated than that?
Obviously, deleting the closing z is simple to script in your programming language of choice.
This class of algorithms is generally known as finding the "skeleton" or "medial axis". If you search on those terms you will find papers and other documents describing different potential approaches. Many/most usually involve starting with bitmaps though.
https://en.wikipedia.org/wiki/Topological_skeleton
Related
I have a number of SVG images being inserted into a PDF file using TCPDF. For example:
<path d="M0 100 L 80 100 L 40 27 L 0 100" stroke="black" fill="transparent" stroke-width="5" />
The problem is that TCPDF seems to turn any transparency to grey. How can I make it transparent? I cannot simply turn it to white as it is being placed on top of other data as well.
Many of the shapes are complex, utilizing bezier curves and stroke arrays so I need to use a path rather than lines, polygons, or polylines.
I think this might not be possible, but I have found a workaround. Rather than setting
fill="transparent"
I just use:
fill="none"
or
fill-opacity="0"
This seems to work fine. Both can be found on this page:
How to make an SVG element transparent (using SVGweb)
I'm searching for the simplest definition in svg of a squared number '8', like in the figure below (black inside).
Ways that come to my mind are made of filling several polygons (minimal would be 1 black rectangle and 2 white squares). Is there a way to define it with a single command, specifying all the vertices?
Update: the purpose, BTW, is to create a font from svg files like this one.
You can overlap multiple paths in a single path element and using the fill-rule "evenodd" the intersecting areas will crop. like so:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path stroke-width="0" d="M20,20 h20 v35 h-20z M25,25 h10 v10 h-10z M25,40 h10 v10 h-10z" fill-rule="evenodd" />
</svg>
Here is a link that explains how it works.
I'm trying to create an interactive grid for a web game (HTML, JS, etc.), in which every cell should change it's fill on hover/click. I need both a regular square grid, and a triangular grid. I want it to be vector based so that it will scale nicely to fit different screen sizes. I thought the easiest way would be to create a pattern and fill it on a rectangle. This is the code I have so far:
<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
For the square, and this for the triangular grid:
<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>
They produce the grids I need, but I don't know how to target each cell individually. I'm guessing since I've found no information on this, it's just not possible, and some other solution other than should be used. Any ideas?
Edit:
I want to be able to cycle through different fills on mouse click. For the square grid, I'm using the code I found here: http://bl.ocks.org/bunkat/2605010 but for the triangular lattice, I have absolutely no idea where to begin. That's why I thought of .
PS: I should probably add I have no programming experience, I'm trying to make a nonogram game to teach myself some Javascript.
Patterns are purely decorative. Targetting a single tile within a pattern would be like targetting a single colour within a gradient. Better not to think about them as distinct "tiles", and instead think of it as a sheet of repeating wallpaper.
So what to do? Well, you are going to need a distinct element for each piece that you want to be able to manipulate. But since they are mostly the same, you'll want to use <use> elements to repeat the graphics. You'll need to do a bit of math to figure out how to position the triangles just right, but no worse than what you had to do to figure out that pattern. It will of course be easiest to create the elements with a loop in your JS script, although you could hard code the original elements in a <defs> section.
Moreover, you don't specify what you want to do with the individual cells. If you are going to be changing their appearance, it might help to remember that you can set styles on the <use> element and these will be inherited by the re-used graphics. So if you don't set fill/stroke directly, you can change them by styling the <use>, instead of having a separate, differently coloured template to swap in.
The SVG elements <line>, <circle>, <rect>, <text> and , <image> allow for positioning by x and y based off of the view port. Furthermore they can also be relatively positioned. Is there any way to accomplish this for <polygon> than to wrap it in an <svg>? The closest substitute for <polygon>, <path>, also has this... issue.
Based on the excellent comment by #Michael Mullany I was able to find a solution to the issue. By putting the polygon or path in side a <defs> tag it can be used later on in a <use> tag. The <use> tag allows for setting of x and y attributes that function the same as the attributes of other simple shapes like <line>, <circle>, <rect>, <text>
http://jsbin.com/iqEkAsE/2
<svg width="100%" height="100%">
<defs >
<path id="Triangle"
d="M 1 1 L 200 1 L 100 200 z"
fill="orange"
stroke="black"
stroke-width="3" />
</defs>
<use x="33%" y="33%" xlink:href="#Triangle"/>
<use transform="scale(-1)" x="-66%" y="-66%" xlink:href="#Triangle"/>
</svg>
It would be nice to be able to scale the shape dynamically by setting the width and height property of the <use> to a percent but it can still be scaled with a transform.
Use transformations (translation, rotation, scale), that is the correct way to do it.
The other shapes allow you to use a point defined by x,y coordinates because that's just a part of the shape definition (i.e. how do you define a circle, you need the center point and the radius).
In theory you could position an element using its bounding box, however the bounding box is not "settable" (there is no setBBox method), there is only getBBox()
I want an arc line that goes from thick to thin, kind of like figure 13 here:
Is this possible with SVG?
Not with just a stroke, no. You would have to use a fill, and offset the paths slightly to get the tapering effect.
I found a way to do it, just draw two lines with a little offset in beginning point. Just like this:
<svg viewBox="0 0 1000 400">
<path d="M 50,250 C 50,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
<path d="M 60,250 C 60,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
</svg>
In Inkscape, there are Triangle In and Triangle Out styles for drawing curves that look like that, and they just make a path, so I assume not.