SVG Vector Lab

I Built SVG Vector Lab: An SVG Editor That Keeps the Canvas and Code in Sync I recently built SVG Vector Lab, a free, open-source SVG editor that runs entirely in the browser. It lets you work visually on a canvas while keeping the actual SVG source, layer list, and inspector in sync. Try it here: [https://svgvectorlab.com](https://svgvectorlab.com/ "https://svgvectorlab.com/") The project started with a frustration I kept running into: SVG is one of the web’s most useful image formats, but making a small, precise change can involve more friction than it should. A full design application is often excessive, while editing path data manually makes it difficult to understand what each coordinate is doing. I wanted something in between—a focused tool where I could move a point, adjust a curve, inspect an attribute, and immediately see the real SVG markup change. The idea: one SVG, several connected views The main idea behind SVG Vector Lab is simple: the canvas and the code should never feel like separate editing modes. When you select an element on the canvas, it is also selected in the layer list and displayed in the inspector. When you drag a path point or change a fill color, the source updates automatically. You can also edit or paste the markup directly, apply it, and continue working visually. That two-way relationship became the foundation of the project. Instead of translating an SVG into a proprietary document format, the editor works with standard SVG elements and attributes. The file you open is the file you edit, and the finished result can be copied or downloaded as ordinary SVG markup. What I built SVG Vector Lab supports the SVG editing tasks I use most often: • Open an SVG file, drop one onto the canvas, or paste its markup • Select, move, resize, rotate, duplicate, and reorder elements • Edit paths by dragging endpoints and Bézier control points • Change fills, strokes, opacity, geometry, transforms, text, and raw attributes • Convert rectangles, circles, ellipses, lines, polygons, and polylines into paths • Edit individual path commands in a structured table • Snap points to useful positions on other elements • Copy clean SVG markup or export SVG and PNG files • Undo and redo canvas edits while preserving the current selection I also added the smaller interactions that make an editor feel practical: zooming toward the cursor, panning with Space-drag, rubber-band selection, multi-selection, keyboard nudging, and a Fit command for quickly framing the artwork. The hardest part was keeping everything synchronized An SVG editor has several representations of the same document: DOM elements, source text, layers, inspector fields, path commands, selection handles, and the rendered result. A change in any one of them can affect all the others. The challenge was not simply drawing a bounding box or changing an attribute. It was ensuring that every part of the interface continued to describe the same SVG after each action. Transforms made this especially interesting. An element may be inside one or more transformed groups, so dragging something on the screen does not always map directly to its local coordinates. Moving path points, resizing selections, and snapping across transformed elements all require translating between coordinate systems. Working through those cases gave me a much deeper appreciation for the geometry browsers handle when rendering SVG files. Local-first by design SVG files opened in the editor are processed inside the browser. The application does not upload artwork to an editor backend, and work in progress is automatically saved in the browser’s local storage. This was both a privacy decision and a product decision. A small web tool should not require an account or a server request just to change a path. Keeping the document local makes the editor faster to open, simpler to use, and suitable for artwork someone may not want to send to another service. Imported SVG markup is also sanitized before it is displayed. Scripts, event-handler attributes, and unsafe JavaScript URLs are removed because an SVG file can contain much more than passive drawing instructions. A deliberately small web stack I built the editor using plain HTML, CSS, and JavaScript, without a client-side framework or runtime dependency. It can even be opened from a local file, while the hosted version is delivered as a static site through Cloudflare. That constraint encouraged me to keep the architecture understandable. It also suits the project well: SVG is already a browser-native document format with a powerful DOM and rendering model, so the browser provides most of the foundation the editor needs. The project is open source under the MIT License. Its source code is available here: [https://github.com/kirillman200/vector_lab](https://github.com/kirillman200/vector_lab "https://github.com/kirillman200/vector_lab") What I learned Building SVG Vector Lab changed how I think about editing tools. First, direct manipulation is only useful when it remains predictable. Selection behavior, coordinate conversion, undo history, and keyboard controls are not secondary details. Together, they determine whether the canvas feels trustworthy. Second, showing the underlying representation can make a tool more useful rather than more intimidating. Keeping the SVG source visible turns each visual edit into a small explanation of how SVG works. Finally, a focused tool does not need to reproduce an entire design suite. SVG Vector Lab is intentionally centered on inspecting and editing existing SVG structure. That narrower scope allowed me to spend more time on paths, transforms, synchronization, and local file handling—the parts that define the experience. Try SVG Vector Lab You can open SVG Vector Lab and begin editing without signing up or installing anything: [https://svgvectorlab.com](https://svgvectorlab.com/ "https://svgvectorlab.com/") Load one of your own SVG files, use the included sample, or paste markup directly into the source panel. If you are interested in the implementation, you can also explore the project on GitHub: [https://github.com/kirillman200/vector_lab](https://github.com/kirillman200/vector_lab "https://github.com/kirillman200/vector_lab") I would be glad to hear what you create with it and which SVG workflows you would like the editor to support next.