Nudge — visual element nudger for SVG & HTML

Drop an SVG or HTML file here

Then click anything and drag it. Nudge writes back only a translate — it never touches the rest of your file.

Referenced fonts, CSS or images? Drop the whole folder, or select the file plus its assets together, so it renders with the right metrics.

Selection

Click an element on the canvas. Shift-click to add to the selection, or drag a box on empty space to grab a whole label cluster.

Moved 0

Nothing moved yet.

Save

waitingLoad a file to check whether it can be patched surgically.

Keys & behaviour

click select · shift+click add · alt+click select parent

drag on empty space — rubber-band select

drag a handle resize — corners both axes, edges one · shift uniform

↑↓←→ nudge 1 unit · shift+arrow nudge 10

space+drag or middle-drag — pan · scroll — zoom

ctrl+Z undo · ctrl+shift+Z redo · esc deselect

Dragging follows the mouse 1:1 on screen. Arrows step whole units in the element's own coordinates, so the numbers stay clean at any zoom.

Nudge only ever adds or edits one attribute: transform on SVG elements, inline style transform on HTML ones. Everything else in the file comes back byte-for-byte.

Resizing writes a scale() into that same transform. On SVG that scales stroke widths with the shape — usually what you want for a leader line, but worth knowing.