3

I have a few white PNG icons that I'm trying to convert to a raw SVG path. Tried several converters, including InkScape, which returned some XML formatted document, but no data path.

Any pointers on how to obtain such a plain data path from the source image?

2 Answers 2

10

There's no SVG data in a PNG. There is no way to directly convert a bitmap (or raster) format such as a PNG to an SVG. You either have to auto trace (Trace bitmap in Inkscape) or draw it manually.

Steps to auto trace a White bitmap image in Inkscape.

Note: for the best result, use a large (high resolution) bitmap image. To get a good trace, the result will very much depend on the quality of the original.

  1. In Edit > Document properties, set the background to "Chequerboard Background", so that you can see a white graphic

  2. Import the PNG into Inkscape, and select it.

  3. Do Path > Trace Bitmap

  4. To trace a white graphic, set it up as follows: you need to do a Multiple scan, and set it to Colours, 2 scans are the minimum, and choose Remove background

enter image description here

  1. When you click Apply the vector will be created on top of the image layer. Click and drag the vector to move it away, and delete the bitmap image.

  2. Save as SVG. Open the file in a text editor to find the path data. It should look something like this:

<path d="m............................./>"

Here's an example: a white PNG (left), and the trace (right) which I selected using the Edit Nodes Tool N so you can see the paths and nodes.

enter image description here

And the path data generated below: I saved this as an "Optimised SVG", to reduce the number of decimal places by setting it to output to 3 significant digits.

<path d="m94.1 257c-0.582-0.083-2.73-0.389-4.76-0.679-42.7-6.1-78.5-39.6-87.8-82.3-1.93-8.84-2.24-12.7-2.05-24.9 0.155-9.74 0.275-11.5 1.06-15.7 3.25-17.5 9.48-31.8 19.9-45.6 17.4-23.1 42.8-38 71.2-41.7 5.79-0.757 21.4-0.757 27.2 0 44.1 5.76 80.2 38.6 89.9 81.8 2.01 8.96 2.38 13.1 2.21 25.1-0.169 12.2-0.513 15-3.07 25-4.52 17.7-14.3 34.9-27.5 48.1-16 16.1-35.5 26.1-58.3 30.1-3.8 0.661-5.96 0.778-15.7 0.854-6.21 0.048-11.8 0.0194-12.3-0.0636zm23.4-5.24c27.3-3.46 51.8-17.7 68.5-39.7 11-14.6 17.6-31.2 19.8-49.9 0.59-4.94 0.586-16.8-7e-3 -21.9-1.45-12.4-4.63-23-10.1-34-11.8-23.6-32.6-41.9-57.6-50.5-24.2-8.36-50.5-7.17-74.2 3.35-7.13 3.18-14.7 7.78-21.3 13-4.53 3.57-13.8 12.8-17.1 17.2-19.4 25.1-26 56.3-18.3 86.8 8.39 33.3 33.5 60.4 66.2 71.2 7.73 2.57 15.6 4.19 24.1 4.97 4.54 0.415 14.7 0.148 20.1-0.525zm-19.4-4.64c-7.54-0.722-13.8-1.87-19.9-3.63-4.68-1.35-12.9-4.57-12.9-5.05 0-0.228 1.14-0.292 3.16-0.177l3.16 0.18 1.16-2.25c1.19-2.3 1.54-2.52 3.34-2.03 0.632 0.169 0.804 0.557 1 2.25l0.238 2.05 4.35 1.09 1.89-1.81 6.03 0.638c5.76 0.609 6.04 0.675 6.24 1.45 0.197 0.784 0.335 0.813 3.92 0.813 3.51 0 3.81-0.0583 5.44-1.06 1.45-0.89 2.08-1.06 4.01-1.06 2.14 0 2.29 0.0528 2.29 0.794 9e-3 1.29 0.409 1.56 2.72 1.79 2.15 0.219 2.2 0.203 2.43-0.686 0.199-0.793 0.365-0.884 1.28-0.7 0.581 0.116 1.43 0.211 1.88 0.211 0.454 0 1.35 0.454 1.98 1.01 1.01 0.881 1.54 1.04 4.16 1.24 4.86 0.38 6.7 0.633 6.7 0.924 0 0.783-12.1 3.24-18.9 3.85-3.94 0.351-12.7 0.436-15.6 0.151zm-67.2-34.8c-13.2-16.1-20.5-34.2-22.1-55.1-0.48-6.1-0.196-14.3 0.544-15.7 0.264-0.5 1.6-2.48 2.98-4.39s2.5-3.78 2.5-4.13c0-0.381-0.806-1.25-1.94-2.09-1.07-0.788-1.94-1.48-1.94-1.54 0-0.849 2.83-9.99 4.07-13.1 8.38-21.3 23.7-38.8 43.9-50.1l3.7-2.07 4.06-0.232c2.23-0.128 4.49-0.345 5.03-0.482 0.582-0.15 0.97-0.108 0.97 0.106 0 0.196-0.401 0.456-0.891 0.579-1.01 0.253-3.22 2.15-4.72 4.05l-1.01 1.27 3.75-0.112c4.49-0.134 4.14 0.106 8.6-5.89 1.73-2.33 3.28-4.28 3.44-4.34 0.161-0.0585 0.944 0.512 1.74 1.27 2.11 2.01 1.98 2.65-1.15 5.46-3.07 2.76-5.07 6.25-3.57 6.25 0.345 0 0.529 0.346 0.529 0.996v0.996l6.97 0.636c3.83 0.35 8.27 0.828 9.86 1.06 2.46 0.361 2.91 0.35 3-0.0776 0.0564-0.276 3.71-2.47 8.12-4.87l8.01-4.36 3.72-0.378c2.05-0.208 4.06-0.505 4.48-0.659 0.725-0.268 0.701-0.327-0.532-1.31-1.16-0.929-1.29-1.2-1.29-2.73-1e-5 -1.58 0.0529-1.68 0.763-1.46 1.56 0.496 3.12 1.23 3.13 1.49 6e-3 0.143 0.23 0.548 0.497 0.901 0.458 0.605 0.698 0.528 4.24-1.36 4.36-2.33 3.94-2.33 9.99 0.0248 5.98 2.33 16.7 8.39 23 13 8.81 6.44 18.1 16.7 24.1 26.6 8.99 14.7 13.8 31.3 14.1 48.1 0.0884 5.91-0.312 8.1-1.48 8.1-0.531 0-0.66-0.443-0.851-2.91-0.207-2.67-1.04-6.39-1.99-8.89l-0.383-1.01-1.01 1.38c-0.953 1.3-1.02 1.64-1.27 6.24l-0.258 4.86-2.86 2.63c-1.68 1.54-3.08 2.57-3.4 2.48-0.295-0.0843-1.49-0.25-2.65-0.369-3.48-0.355-3.6-0.419-5.13-2.68l-1.45-2.14 1.97-5.54 2.13-0.134c1.17-0.0737 2.25-0.0768 2.4-7e-3 0.146 0.0699 0.267 1.35 0.269 2.84 4e-3 2.71 6e-3 2.71 1.23 3.51l1.23 0.797v-1.23c0-0.675 0.264-2.43 0.587-3.9 0.517-2.35 0.745-2.8 1.92-3.72 1.56-1.24 2.56-3.75 2.24-5.64-0.208-1.22-1.2-3.86-1.45-3.86-0.0724 0-1.2 0.539-2.5 1.2-2.25 1.14-6.03 4.56-7.05 6.39-0.375 0.673-0.461 0.64-1.86-0.706l-1.46-1.41 0.232-2.1c0.127-1.16 0.458-2.64 0.735-3.31s0.503-2.06 0.503-3.1v-1.9h-1.16c-1.13 0-1.15 0.0307-1.03 1.37 0.146 1.53 0.0506 1.64-1.75 1.98-1.2 0.226-1.3 0.175-1.68-0.915l-0.402-1.15-1.14 1.08c-0.628 0.594-1.86 1.59-2.73 2.22-0.873 0.629-1.27 1.06-0.882 0.957 1.68-0.442 3.43-0.622 4.08-0.418 0.383 0.121 1.24 1.07 1.9 2.1 1.16 1.82 1.2 2 1.3 5.88l0.0943 4.01-1.92 0.783c-2.98 1.21-2.86 1.36-2.59-3.25 0.133-2.23 0.155-4.06 0.0482-4.06-0.107 0-3.13 3.1-6.71 6.88-6.85 7.24-8.2 9.15-9.2 13-0.734 2.83-1.97 3.99-7 6.6-2.96 1.54-4.48 2.55-5.23 3.5-0.584 0.738-2.51 4.3-4.27 7.91-3.49 7.13-4.49 8.38-7.75 9.58-1.97 0.732-9.27 1.12-9.98 0.526-0.274-0.227-0.554-1.3-0.636-2.45-0.117-1.62-0.633-3.04-2.48-6.85-1.28-2.64-2.9-5.77-3.6-6.96l-1.26-2.15-0.351-7.05c-0.289-5.8-0.477-7.33-1.06-8.61-0.39-0.857-0.71-2.22-0.71-3.02 0-0.805-0.242-1.89-0.537-2.4-0.604-1.05-1.9-6.41-2.18-8.96-0.0978-0.922-0.239-1.68-0.313-1.68-0.0744 0-0.734 0.235-1.47 0.523-1.88 0.74-6.87 1.23-12.5 1.24l-4.82 3e-3 -6.45-6.71c-3.55-3.69-6.7-7.07-7-7.5-0.363-0.512-0.679-2.23-0.916-4.96l-0.361-4.18 0.924-0.758c0.508-0.417 5.32-3.77 10.7-7.46l9.78-6.7-0.312-4.36 2.56-0.604 0.103-2.71 0.103-2.71 4.28-0.842-0.185-1.14c-0.102-0.627-1.41-2.98-2.91-5.23-2.68-4.02-2.71-4.1-2.14-4.97 0.32-0.488 0.975-0.986 1.46-1.11 0.674-0.169 0.834-0.393 0.699-0.976-0.0966-0.416-0.39-1.71-0.651-2.87l-0.476-2.12-0.576 1.36c-0.317 0.745-0.762 1.98-0.989 2.73l-0.413 1.38h-17.5l0.793 1.07c0.906 1.23 0.67 1.97-0.866 2.73-0.776 0.381-1.27 0.333-3.32-0.324-3.03-0.97-3.29-1.18-3.29-2.62 0-0.644-0.174-1.28-0.387-1.41-0.694-0.429-1.38 0.72-1.78 2.98-0.239 1.35-0.702 2.58-1.19 3.15-0.736 0.855-1.1 0.951-4.39 1.17-3.3 0.221-3.74 0.341-5.42 1.44-5.76 3.8-11.3 6.71-18.1 9.48l-4.68 1.9-3.58 5.38c-1.97 2.96-3.7 5.38-3.85 5.38s-0.328 0.357-0.39 0.794c-0.0804 0.566-0.661 1.06-2.02 1.71l-1.91 0.911 2 1.33c1.1 0.73 2 1.52 2 1.75 0 0.596-2.22 2.68-2.85 2.68-0.612 0-5.27-4.59-5.27-5.19 0-0.226 0.791-0.856 1.76-1.4 1.39-0.782 1.91-1.34 2.48-2.66 1.08-2.52 1.26-3.74 0.568-4.01-1.38-0.528-3.87 2.52-5.66 6.91-1.43 3.52-1.79 5.81-1.33 8.43 0.38 2.16 0.36 2.29-0.462 3.27-0.968 1.15-1.51 3.32-1.01 4.1 0.179 0.284 3.42 1.58 7.19 2.89 7.11 2.46 13 4.88 20.2 8.26l4.19 1.97-0.233 1.55c-0.422 2.81-0.177 3.14 4.48 5.94 2.34 1.41 5.2 3.46 6.36 4.56 2.06 1.95 2.11 2.04 1.92 3.48-0.256 1.91-1.52 3.25-4.52 4.76-2.15 1.09-2.39 1.33-3.22 3.23-0.496 1.13-1.58 4.12-2.41 6.64-1.16 3.54-1.77 4.85-2.65 5.73-1.28 1.29-2 1.38-4.56 0.601-0.97-0.296-2.1-0.455-2.52-0.353-2.05 0.505-6.6 6.9-10 14.1l-1.77 3.7 1.12 2.23c0.614 1.23 2.37 4.48 3.9 7.22 1.53 2.75 2.78 5.17 2.78 5.37 0 0.407-3.21 2.15-3.96 2.15-0.25 0-1.54-1.33-2.87-2.95zm134-71.8c-0.261-0.0897-0.936-1.19-1.5-2.45-0.565-1.26-1.92-3.66-3.01-5.34-2.15-3.31-8.55-12-8.82-12-0.197 0 1.71 2.84 3.15 4.7 0.576 0.74 2.38 4.3 4 7.92 1.63 3.61 3.19 6.83 3.47 7.14 0.36 0.398 0.912 0.52 1.84 0.407 0.732-0.0881 1.12-0.234 0.858-0.323zm-32.7-30.4c0.455 0 1.32-0.0988 1.92-0.22 0.945-0.189 1.07-0.337 0.888-1.06l-0.21-0.839h7.13v-1.39c0-1.25 0.0952-1.4 0.97-1.5 0.534-0.0614-0.845-0.431-3.06-0.822l-4.03-0.71-1.26 1.29c-1.16 1.19-1.45 1.31-3.74 1.48-2.47 0.182-2.48 0.18-3.1-0.903l-0.623-1.09-1.24 1.2c-1.37 1.32-3.15 4.14-2.82 4.47 0.114 0.114 1.83 0.549 3.82 0.967l3.62 0.76 0.452-0.819c0.273-0.495 0.779-0.819 1.28-0.819zm-11.1-3.79c-0.0119-0.814-0.49-1.3-2.98-3-2.55-1.74-3.19-2.03-4.58-2.03-1.65 0-2.01 0.24-8.24 5.48-0.0616 0.0518 2.15 0.117 4.93 0.145 2.77 0.0279 5.11 0.123 5.2 0.211 0.0884 0.0884 1.4 0.161 2.92 0.161h2.76l-0.0141-0.97zm23.2-5.63 2.58-0.903-1.35-1.38c-1.43-1.46-1.4-1.47-2.02 0.501-0.14 0.444-0.57 0.619-1.53 0.622-2.13 8e-3 -2.92 0.336-2.92 1.21 0 0.43 0.0981 0.88 0.218 1 0.33 0.33 2.14-0.0504 5.01-1.05zm14.5 97.5c0-2.44 0.0554-2.62 1.03-3.34 0.894-0.661 1.15-1.29 1.99-4.83 0.949-4.02 0.974-4.07 1.97-4.07h1.01v7.66l-1.23 1.62c-1.07 1.4-1.23 1.88-1.23 3.58v1.96h-3.53zm23.7-1.85c-0.537-0.376-0.784-0.911-0.784-1.7v-1.15l-8.47-1.94v-19.4l-1.07-0.213c-1.33-0.266-1.52-0.565-1.22-1.93 0.225-1.02 0.316-1.08 1.5-0.886 1.12 0.182 1.38 0.0674 2.37-1.08l1.11-1.28 1.11 0.658c0.899 0.531 1.2 1.02 1.53 2.54 0.436 1.95 0.437 1.95 2.84 2.32 0.907 0.139 0.958 0.067 1.06-1.48l0.105-1.62 4.67-0.206 0.223 1.12c0.123 0.615 0.224 1.65 0.224 2.3 0 1.23-0.0663 1.19 2.59 1.72 0.358 0.072 2.1-0.422 3.87-1.1 3.06-1.17 3.24-1.2 3.69-0.593 0.256 0.35 0.551 0.976 0.655 1.39 0.37 1.47-2.73 10.9-5.67 17.2l-1.5 3.23-2.49 1.31c-2.75 1.45-5 1.71-6.36 0.758zm-43.3-9.86c-0.678-0.524-0.678-0.535 1e-3 -1.06 0.377-0.292 1.67-2.24 2.86-4.32l2.18-3.79 4.31-2.73c2.37-1.5 4.38-2.73 4.46-2.73 0.984 0-5.63 9.26-9.39 13.1-2.08 2.15-3.12 2.5-4.42 1.5zm33.8-21.1c-0.437-0.211-0.794-0.497-0.794-0.637 0-0.14 0.901-1.5 2-3.03 1.1-1.53 2.04-2.83 2.08-2.89 0.193-0.274 2.97 0.793 2.96 1.14-0.0223 0.874-4.32 5.87-5.02 5.83-0.243-0.0131-0.799-0.196-1.24-0.407zm-87.5-95.8c-0.344-0.525-0.625-1.61-0.625-2.41 0-1.17 0.274-1.8 1.4-3.19 2.46-3.05 5.77-6.1 7.67-7.06 1.82-0.92 1.92-0.931 6.62-0.687 2.63 0.136 4.92 0.39 5.1 0.564 0.199 0.192 0.0605 0.618-0.353 1.08-1.99 2.25-17.4 12.7-18.7 12.7-0.255 0-0.744-0.43-1.09-0.955zm14.2-1.6c-0.129-1.02-0.307-2.11-0.394-2.42-0.132-0.472 0.295-0.609 2.54-0.812 1.48-0.134 2.77-0.172 2.86-0.0835 0.0884 0.0884 0.0497 1.29-0.086 2.66l-0.247 2.5h-4.43zm12.5-7.62c-0.497-0.93-1.52-4.67-1.33-4.86 0.284-0.284 9.06 2.84 9.06 3.23 8e-5 0.194-1.67 0.772-3.71 1.28-3.38 0.847-3.74 0.879-4.02 0.353z"/>
2
  • 1
    this is probably the right way, but unfortunately my PNG is not high-res enough to get accurate path representation of the underlying bitmap. Will have to resort to manual pen overlay, as suggested by @Sumit's answer
    – Khorkhe
    Feb 5, 2022 at 11:00
  • 3
    @Khorkhe - yes if the image is too low res, then redrawing manually would be the best method. Either that, or try to find a higher resolution version of the image, perhaps by doing a reverse image search on google.
    – Billy Kerr
    Feb 5, 2022 at 11:56
2

You can use the pen tool to make an overlay on your PNG image and then export it into an SVG file.

enter image description here

1
  • 1
    i tried automatic tracing first, but will probably have to use your approach. thanks!
    – Khorkhe
    Feb 5, 2022 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.