I'm working on a project where I need to parse svg path data.
Right now we're loading an svg, looking for the path tag, and pulling out it's d attribute.
For some of the artwork we'll get path data that is made up of coordinates which we can translate into the data types we need. E.g.
But other times the d value is in a more g-code-esq format.
Like in this case I drew a rectangle, converted it to a compound path:
And when I export it and look at the svg I get a d value like this:
Which we can't easily parse for the project.
My questions are:
How do I read this second format? It doesn't seem to fit what I'm reading on MDN so I suspect there's some other documentation I need to refer to: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
For illustrator users, is there a way of changing the format when exporting?
I know that this seems like more of an art question than a programming question, but I'm trying to understand the underlying reasoning behind the svg data structure so I can better parse it.
Oh! Oh ok, I was 100% misunderstanding the path data that I was reading. I didn't realize that the delimiting information was based on the letter. My brain wanted some specific character as a delimiter like a comma or pipe.
So reading (and in some cases re-reading :| ) the documentation, when I see:
M753,315H435.27V165H753Z
I can read that as:
M753,315 Move to x,y coordinates x: 753 y:315
H435.27 Starting at the current location, draw a horizontal line to the absolute x coordinate of 435.27
V165 Starting at the current location, draw a vertical line to the absolute y coordinate of 165
H753 Starting at the current location, draw a horizontal line to the absolute x coordinate of 753
ZDraw a straight line to the initial point of this path to close the path. This doesn't necessarily mean a horizontal or vertical line, but the coincidence that we're at the same x coordinate that we started at means that if we draw a straight line we will get a vertical line to complete the rectangle
That seems right. Anything I missed or misunderstood?
Also, thank for all of the links. I appreciate the points :clap: :bows:
Related
so I have a drawing program and I need to implement a "broken line", it is an SVG line with two another lines in the middle of this line, these two line needs to cross perpendicularly to the principal line, maybe this picture can help me to explain the problem:
This line can be drawn in any angle that the user choose
I don't really understand svg's so I'm having a lot of trouble implementing this.
Thank you
So I discovered one way to implement that using polylines and calculating the middle of the source and target coordinates, so when it changes I change the middle point too. After that, I created a marker-mid with the double lines.
I like to understand how I can change SVG path which contains relative (‘m’) command to absolute (‘M’) commands. I have created two identical paths where Green path should cover Black, but that is not is case. How SVG compiler render relative path. Your help will be very much appreciated.
In SVG files a letter represents a command followed by some arguments. The lower command letter represents relative coordinates where upper case represents absolute coordinates. The Z commands the closing loop. The closing loop means the pen has gone back to the same position where it started. In my case I was not going back to the same position which gave me the bad output. Please note in case of small 'm' we have to add coordinates the previous absolute coordinates.
Now my application works fine.
As described in another post, I am trying to recreate an SVG from vector graphics commands in a PDF and I am facing some difficulty in the part where I need to intersect a set of clip paths. For instance, the raw SVG has a few clip path elements line #16 which need to be intersected and applied on the rectangle fill (line #17) to obtain what looks like this: .
I am not clear about the correct and the best way to achieve intersection of multiple clip paths in an SVG. I wasn't able to find much information about this on the web except this one, going by which I came up with this SVG where I introduce a sequence of additional clipPath elements which try to intersect the current intersection with the next original clipPath to be added to the intersection set. This approach seems rather inelegant to me. Besides, that SVG doesn't seem to work on some versions of Firefox (ESR 17.x) though it renders the expected result on Firefox 5, Chrome and IE. Is there something wrong with the SVG? Or even if it is correct, is there a simpler/better way to achieve the intersection?
The way you've done it seens reasonable. There's a w3c example in the testsuite.
i am working on SVG, problem i am facing is that i want to read the path and after reading it i want to draw the circles through tag used in svg, on that path, kindly help me out any help will be awesome...Thanks in Advance :)
The information you have provided still does not make sense to me. Here's a guess at what you might be looking for.
If you have a <path> element and you want to place circles along the path, you can use the getPointAtLength() method to find the location at an arbitrary distance along the path.
Then you can create <circle> elements (or <use> elements that reference a circle) and place them at this location.
Here is a demo that uses this technique (and also happens to create a <polygon> of the result):
http://phrogz.net/svg/convert_path_to_polygon.xhtml
I have a path I've created in Illustrator and saved as an SVG.
Now I want to programmatically place it at different sizes and coordinates on a large canvas.
Say I've got this image:
(source: omgtldr.com)
How would I reproduce that same image in different places and sizes in one SVG file, like this:
(source: omgtldr.com)
for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.
Please assume I'm going to be OK with the programming part, I'm comfortable working with XML files. It's the SVG parts I don't understand.
You need the transform attribute. You can move your paths with translate and resize them with scale.
Better to use the <use> element (transformed) than to copy your path for each instance.