pathtopoints's Introduction

PathToPoints

Convert SVG Paths to arrays of points - Live Demo

PathToPoints is a web application that allows you to extract points from SVG paths or generate them from text. It provides a visual representation of the points and offers various output formats.

Features

Drop SVG files or generate paths from text
Adjust point generation settings
Visual representation of extracted points
Output points in various formats (individual paths, all paths combined, JSON)
Automatic scaling and centering of paths
Color-coded path visualization

Usage

Drop an SVG file into the dropzone or use the "Generate from Text" option.
Adjust the "Step between points" setting if needed.
Choose the desired JSON output format (tuples or single array).
View the generated points in the expandable sections below.

Output Formats

Individual Paths: Each path's points are listed separately, color-coded for easy identification.
All Paths Combined: A single list containing points from all paths, separated by '#'.
JSON: An array of point arrays, either as tuples [[x1, y1], [x2, y2], ...] or a single array [x1, y1, x2, y2, ...].

Point Representation

Each line represents a point.
X and Y coordinates are separated by a comma.
Paths are separated by '#' in the combined output.

Notes

The application only processes SVG path data. Other SVG attributes like rotations or transforms are ignored.
While the visual representation might look unusual in some cases, the extracted point data should be accurate.

Development

The main functionality is implemented in JavaScript, using libraries such as:

jQuery for DOM manipulation
Dropzone.js for file handling
Raphael.js for SVG parsing and manipulation
opentype.js for font handling in text-to-path conversion

To set up the project locally:

Clone the repository
Open index.html in a web browser
For development, you may need to run the page through a local server due to CORS restrictions when loading fonts

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source. Please check the repository for license details.

pathtopoints's People

Stargazers

Watchers

pathtopoints's Issues

It would be really cool if I could have it in an actual array format (no points without a comma). It would be even better if I would be able to get it in an array of objects so I could just paste it in my code and reference pts[index].x and pts[index].y.

Lines don't work

Add a single horizontal line and the app gets stuck on the 'Generating points from SVG' screen.

SVG data:
<svg width="80px" height="3px" viewBox="0 0 80 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="gSA" transform="translate(-2.000000, -27.000000)" stroke="#979797" stroke-width="2">
            <g id="kSA" transform="translate(2.637650, 2.424578)">
                <line x1="0" y1="25" x2="70" y2="25" id="Path-5"></line>
            </g>
        </g>
    </g>
</svg>