What does d mean in svg path? - html

<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Does d stand for something in particular? I couldn't find anything via Google.


d is Path Data. The definition of the outline of a shape.
Reference : http://www.w3.org/TR/SVG/paths.html#PathData


d refers to the <path> data. (mdn link)
M tells the canvas to put the pen down at a specific location. It doesn't draw to that point from wherever it was previously.
L tells the canvas to draw a line from wherever it was last to the given coordinate.
Z tells the canvas to stop drawing (pick the pen up).
I found this overview from Dashing d3js on SVGs helpful.

Related

SVG displays incorrectly in Firefox

I have an SVG that I plan to put on a website.
The SVG was generated from illustrator using using the method described here
When viewed in Firefox 84.0.1 I get this:
When viewed in Safari 14.0.2 (16610.3.7.1.9) and Chrome 87.0.4280.88 I get this:
Is this an issue with Firefox or an issue with the SVG?
What's the best way to debug?
Edit
I was able to isolate the problem to the following path. As pointed out by others the issue appears to be with invalid path descriptions in the SVG.
I was able to solve problem by simplifying the path in illustrator and re-exporting.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="138.71" height="102.25" viewBox="0 0 138.71 102.25"><path d="M73.72,95.49a9.59,9.59,0,0,1,5.2,1.3,1990328647664.52,1990328647664.52,0,0,0,.2.2,9,9,0,0,1,3.7,3.8,8.75,8.75,0,0,0,7.7,4.8,8.46,8.46,0,0,0,7.7-4.8A9.27,9.27,0,0,1,102,97c.1-.1.2-.1.3-.2a10.56,10.56,0,0,1,5.2-1.3,8.71,8.71,0,0,0,7.8-4.3,8.39,8.39,0,0,0-.2-8.9,9.55,9.55,0,0,1-1.5-5.2v-.3a9.69,9.69,0,0,1,1.4-5.2,9,9,0,0,0,.3-9.1,8.64,8.64,0,0,0-8-4.3,9.59,9.59,0,0,1-5.2-1.3,2487910809616.32,2487910809616.32,0,0,1-.2-.2,9,9,0,0,1-3.7-3.8,8.75,8.75,0,0,0-7.7-4.8,8.46,8.46,0,0,0-7.7,4.8,9.27,9.27,0,0,1-3.8,3.8c-.1.1-.2.1-.3.2a10.56,10.56,0,0,1-5.2,1.3,8.71,8.71,0,0,0-7.8,4.3,8.39,8.39,0,0,0,.2,8.9,9.55,9.55,0,0,1,1.5,5.2v.3a9.69,9.69,0,0,1-1.4,5.2,9,9,0,0,0-.3,9.1A8.83,8.83,0,0,0,73.72,95.49Z" transform="translate(-61.55 -45.07)" fill="none" stroke="#6d6665" stroke-linejoin="round" stroke-width="6"/><path d="M154.45,95.49a9.11,9.11,0,0,1,5.3,1.4.1.1,0,0,1,.1.1c4.25,2.56,5.31,9,11.4,8.6,6.22.44,7.09-6.08,11.5-8.6s10.63-.31,13.3-5.8c3.54-5.22-1.82-9.29-1.7-14.4,0-4.93,5-9.26,1.7-14.3-2.73-5.6-9-3.13-13.3-5.7a.1.1,0,0,1-.1-.1c-4.25-2.55-5.31-9-11.4-8.6-6.23-.44-7.09,6.09-11.5,8.6s-10.64.31-13.3,5.8c-3.55,5.23,1.81,9.29,1.7,14.4a9.69,9.69,0,0,1-1.4,5.2C142.83,87.73,147.57,96.09,154.45,95.49Z" transform="translate(-61.55 -45.07)" fill="none" stroke="#6d6665" stroke-linejoin="round" stroke-width="6"/><text transform="translate(9.1 84.85)" font-size="12" fill="#231f20" font-family="MyriadPro-Regular, Myriad Pro">O<tspan x="8.27" y="0" letter-spacing="0em">r</tspan><tspan x="12.24" y="0">i</tspan><tspan x="15.05" y="0" letter-spacing="-0.01em">g</tspan><tspan x="21.68" y="0">inal</tspan><tspan x="4.68" y="14.4">32 pts</tspan></text><text transform="translate(84.57 84.85)" font-size="12" fill="#231f20" font-family="MyriadPro-Regular, Myriad Pro">Simplified<tspan x="9.92" y="14.4">15 pts</tspan></text></svg>

Here is an excerpt from the start of one of the paths in question:
M 279.17, 522.38
a 9.59, 9.59, 0,0,1, 5.2,1.3,
a 497582161915.69, 497582161915.69, 0,0,1, 0.2, 0.2,
a 9, 9, 0,0,1, 3.7, 3.8,
M is a Move path command. a means draw a elliptical Arc.
The first two numbers in the arc command are the X and Y radii of the ellipse. Somehow that second arc has ended up with an enormous radius.
With an radius that large, you could approximate a small section of it with a straight line. That is probably what Chrome and Safari are doing. However Firefox is clearly getting confused by values that large.
How that arc ended up like that, I have no idea. But it appears you have struck an edge case that FF isn't handling very well.
I would suggest reporting it as an Illustrator bug and possibly a FireFox bug. In the meantime, to work around the problem, you would need to edit those shapes and try and fix those faulty arc segments.

Specifying the Units in an SVG Path Generator

Due to confidentiality, I cannot get into the specifics of the code I am working with, but I'll do my best to describe the issue I'm having.
My professor made a simple-ish React program that generates and outputs SVGs based on a set of parameters for a microchip manufacturing project. We make use of the Flatten-js npm library to create the svgs, along with some helper functions that cobble everything together. We specify parameters as a number, but the number represents units in microns. We have a save function that downloads the svg from the webpage, which makes use of the Flatten.Polygon.svg() method. The method takes some parameters, but specifying units is not one of them. The SVG looks something like:
<svg>
<path stroke="none" stroke-width="1" fill="black" fill-rule="evenodd" fill-opacity="1" d="
M5999.774896627996,6000.3432414235895 L5992.810049576532,6002.509804857073 A0.0338333333333333,0.0338333333333333 0 0,1 5992.789950423468,6002.445192150708 L5999.754797474932,6000.278628717223 A0.04999999999999982,0.04999999999999982 0 0,1 5999.8,6000.25 L6005.7,6000.25 A0.04999999999999982,0.04999999999999982 0 0,1 6005.7,6000.35 L5999.8,6000.35 A0.04999999999999982,0.04999999999999982 0 0,1 5999.774896627996,6000.3432414235895 z
..."></path>
</svg>
The issue is, I need to import the svg into Adobe Illustrator and Fusion 360. When I import them, the SVG works well enough to contain the shapes we predict, but the scaling is wrong. Since the units were meant to be in microns, but F360 works in mm, I expected to have to scale it down to 0.001 the size, but it is way too small when scaled. I'm assuming this has something to do with the program assuming the path's DPI, so in Illustrator I hoped that I could specify PPI manually, but it only has preset values of 72PPI and 300PPI, but the size of the svg in Illustrator is the same regardless of the PPI setting.
To a point, this ceases to be about React, and more about the specifics of html and svg paths, but the program does use React to do what it does. I'm hoping we can do it in code, but if I have to manually edit SVGs I will. Any insight would be appreciated. Thanks!

To spell out what #enxaneta probably thinks, a <svg width="1mm" height="1mm" viewBox="5000 6000 1000 1000"> would identify the
userspace units for the path as micron.
It turns out that this was most definitely the solution. That, coupled with a transform attribute to scale it from microns to mm. Thank you everyone for the speedy responses!

Google Maps Polygon to SVG Path

I have the coordinates that draw the following polygon in the google maps API:
Here is a sample of the coordinates:
longitude: -71.09972, latitude: 9.15553
Following the Mercator-projection formula from this post: Convert a Google Maps polygon path to an SVG path, I get a SVG path that has negative values like this:
M-50.559802168888886,121.46151557464762 -50.589327502222226,121.46285530595195 -50.643108835555566,121.428264939842 ...
When I try to draw that path, no image is shown. However, when I remove the negative symbol, show the following SVG image:
The SVG image is flipped. Is there a way to change the formula to get the correct value? I need the SVG path clean, that means that flip the image with CSS is not an option.
Thanks and regards.

Without seeing your actual SVG output (in SVG fileformat) is hard to say where the problem is. It could be wrong coordinates conversion, wrong encoding.
The most often cause of no image shown in SVG export is wrong or no viewport
For example this is one of my SVG exports (2D slice of glass mesh profile used as input for some machinery):
<svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
<path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
<path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
</svg>
Take a look especially on the first line. And check if your SVG has it. The viewBox property selects which part of the space will be shown and width,height are the output image resolution where the viewBox is mapped to. You need to set booth to maintain aspect ratio.
The mirror x (flip) is done quite easily see the same example again
<svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
<g transform="scale(-1.0,1.0) translate(+84.609371,0.0) translate(-461.177478,0.0)">
<path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
<path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
</g>
</svg>
As you can see I added <g> tag with transform to flip the whole thing without changing path coordinates. I use scale and 2x translate (can be done with one but I wanted to show where the values comes from) You can also use matrix instead. The scale just inverts x axis and translates shift the image so it is centered again ...
[Edit1] if you want "clean" points in path
Then you need to apply the transform on them directly so uppercase letters (like M,L) means absolute values ... so apply both scale and translation on them. Lowercase letters mean relative values so apply just scale on them and you should be fine. Another option is to apply this on the input polygon you are exporting to SVG instead.

Google maps Api 3 symbols

I would like to display on google maps a marker for my current position that I can rotate depending on the user's heading.
Currently only symbols can be attached to a marker and rotated (more here https://developers.google.com/maps/documentation/javascript/symbols).
My challenge is that I want to use a custom symbol that looks like this (https://drive.google.com/file/d/0B5UD8mTDFqP7UHZ6bGpMeGpFR1U/edit?usp=sharing).
My problem is that the SVG file uses to define the shape a PATH and CIRCLE, but google API supports only path.
This is the SVG markup:
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ED6C61" d="M8.234,17.247c- .68,0-3.28-0.336-4.744-0.938c1.975,2.701,3.938,4.688,4.744,4.688s2.77-1.986,4.745-4.688C11.516,16.911,9.915,17.247,8.234,17.247z"/>
</g>
</g>
<circle fill="#ED6C61" cx="8.235" cy="8.235" r="8.235"/>
How do I obtain this shape by only using the path?
Thanks

Create a single path of both objects.
Workflow(using inkscape):
open the SVG
select the circle
convert the circle into a path:
CTRL+SHIFT+C (or menu->path->object to path)
select both pathes:
CTRL+A
combine the pathes:
CTRL+K (or menu->path->combine)
Result:
m 16.469999,8.2349997 c 0,4.5480643 -3.686935,8.2349993 -8.2349993,8.2349993 C 3.6869349,16.469999 0,12.783064 0,8.2349997 0,3.6869349 3.6869349,0 8.2349997,0 12.783064,0 16.469999,3.6869349 16.469999,8.2349997 z M 8.234,17.247 c -1.68,0 -3.28,-0.336 -4.744,-0.938 1.975,2.701 3.938,4.688 4.744,4.688 0.806,0 2.77,-1.986 4.745,-4.688 -1.463,0.602 -3.064,0.938 -4.745,0.938 z
Demo: http://jsfiddle.net/doktormolle/LLH5s/

Translate a marker along a path

In SVG, is it possible to translate the marker_start / marker_end along a Path?
<path id="e:3" fill="black" fill-opacity="1.0" stroke="black" stroke-opacity="1.0" stroke-width="1" d=" M2 12 L18 17 z" marker-start="url(#markerStart)">
I'd like to translate marker-start some X units along the path. How would I do that?

You can set your marker's refX and refY attributes, which define where the marker should be attached to the path. For more details see the specification.
Possibly you will also need to adjust the viewBox on the <marker> element. And you can draw outside the viewBox if you need, provided you set overflow:visible on the <marker> element (or alternatively specify large enough values in the markerWidth, markerHeight attributes).