Export SVG paths directly using Photoshop tools

Recently do a small project, the project used a lot of icon icons, I generally used to directly refer to the large library of icons, such as Fontawesome, Ionicons, materialcommunityicons and so on.

Because recently also focused on the SVG aspect of things, so I suddenly think of some very simple icons, in fact, can be drawn through SVG, the general thing to do this is the tool should be Adobe Illustrator, but because the computer installed only PS, but also too lazy to install a large consumption of software, So think about whether you can use PS to do this thing.

Online about PS Direct Export SVG path article very few, and basically are mutual copy,heart svg and vague, not a bit of the patience of the pit is very difficult to see what exactly said, but in the end are I one by one solved, finishing as follows.

Tools: Adobe PhotoShop CC 64bit script file

First, you need to download a script file save-ps-to-svg1.0.jsx, the latest information about this file, can be viewed on the official website, put this file in the PS installation directory in the/presets/scripts folder, if the script is placed when PS is open State, Then you may need to reboot. PS Draw after a good script, open PS, new layer: svg converter

png to svg

Once the layer is new, you can draw the sunflower svg

However, it is important to note that no matter what tool you want to convert to an SVG path, free svg you must use the shape tool to draw the image, the shape tool in PS is very easy to find, the following are:

The demo here is to use the Custom shape tool, select a bubble shape, pull on the layer and draw a simple bubble:

Save File

To save the entire file, use the default settings:

Exporting SVG paths

Once the file is saved, you can then convert the layer, double-click on the name of the layer and rename it to the name ending with. svg suffix, such as tosvg.svg:

After renaming, click File –> script –>save as SVG to enter a file that ends in. SVG in the same directory where the PSD file is saved:

. svg files in the directory:

View Files

Use the editor to open a file that ends in. svg, at the bottom of the document, you can see the path of the shape (although some are not canonical):

Layer Merge

With the shape tool, each time the mouse draws a layer, if you select all layers right-click the merge layer option, the output SVG path is actually outputting all the layers, not the result after the output layer intersects.

To export the result path after the layer intersects, first we can select all the layers, select the minus top shape (or other options) in the toolbar, and finally click the merge shapes component so that all the layers can be completely merged, The path that you use to output the script is the path to the merged layer.

two problems output path is not canonical

Sometimes, the output path would be the following:

Each path is followed by a letter with the approximate meanings of the letters as follows:

m = MoveTo (m x, y): Moves the brush to the specified coordinate position
L = LineTo (L x, y): Draws a straight line to the specified coordinate position
h = horizontal LineTo (h X): Draws the horizon to the specified X-coordinate position
v = V Ertical LineTo (V Y): Draws the vertical line to the specified Y coordinate position
C = Curveto (c x1,y1,x2,y2,endx,endy): three times the beta curve
s = Smooth Curveto (s x2,y2,endx, ENDY)
Q = quadratic belzier curve (q X,y,endx,endy): Two-time beta curve
t = smooth quadratic belzier curveto (t endx,endy): Mapa = Elliptical Arc (A rx,ry,xrotation,flag1,flag2,x,y): Arc
Z = Closepath (): Close path

According to the above, in the diagram. The letter M and L in the SVG path we all know what it means, but y is what the devil. Why V gave four numeric parameters.

Obviously, there's something that we're not sure is a bug.

How to Solve

The first thing to be sure is that the letters are wrong, but the path in front of the letters is correct.
My approach is to replace those letters with the appropriate letters, depending on the situation.

For example, the shape I'm drawing is a curve, and the two-time beta Q has four parameters, so we can change the letter Y and V in the path to Q, and I've tried it, and it's really doable. Shape rollover

Organize the path path given in. svg into a canonical path path, put it in a browser in an HTML document, and compare it to the original, and the left is what we want to see, the result is as follows, and the right image is based on the path given in the. svg file:

A little contrast shows that the bubbles on the right side of the x-axis are flipped 180° is what we really want on the left.

How to resolve.

My approach is that since the bubbles on the right side of the x-axis are flipped 180° is what we really want on the left, then we will manually flip it over.

x coordinate is not moving, we need to manually change only the y-coordinate, casually write a flip y-coordinate of the JS function, the. svg file given path path input, JS Function example is as follows:

Let Reversepath = (path, svgheight) + = {Let
   arr=path.split (") for
    (let i=0;i<arr.length; i++) {
        i%2== =1? Arr[i] = Svgheight-arr[i]: arr[i] = +arr[i]
    }
    return Arr.join (')
}

Where path is a route, for example 168.9280 167.9198 164.7704 159.9623 158.2457 155.9885, if starting with 0 bits, then the path is basically an odd digit coordinates is the Y coordinate, so only need to deal with i%2===1, and because it is You need to know the height of the layer as opposed to the entire layer, so the svgheight is the height of the layer.
Although the method is stupid, but generally we commonly used SVG shape, converted to a path is generally not much, the most important thing is to solve the problem. finally

It took me half the afternoon to fix the problem, and, even if all the problems were solved, but eventually I wanted to export the sketched shape path from PS, the process was a bit cumbersome, so it would be easier to install a professional tool such as Adobe illustrator directly if you could.