How to annotate an SVG
To annotate an SVG, open it in Inkscape and add text callouts with the Text tool, or use Extensions → Document → Add Comment to embed notes in the file. In Illustrator, draw callout boxes on a separate layer above the artwork. To collect feedback from a client without making them open design software, share a link they can click and comment on in their browser — notes pin to the exact element they mean.
In Inkscape — text callouts or the Add Comment extension
Open the SVG in Inkscape (free, all platforms). For visible callouts, use the Text tool (T): click near the element, type your note, then draw an arrow with the Pen tool to point at the spot. For invisible embedded notes, go to Extensions → Document → Add Comment, select any object, run the extension, and type — the note is stored in the SVG XML, readable in the source but invisible when rendered. Use the text-tool approach for client-facing markup; use Add Comment for internal design notes.
In Illustrator — annotation layer on top of the artwork
Open the SVG in Illustrator (File → Open, not Place — this preserves paths as editable vectors). Create a new layer above the artwork and name it Annotations. Use the Text tool for numbered labels and the Line Segment tool in a bright stroke color for pointer arrows. Lock the artwork layer so you don't accidentally move paths. To deliver without annotations, turn off that layer before exporting (File → Export As → SVG). One gotcha: if you don't save as .ai first, Illustrator won't retain layer structure on reopen — save as .ai immediately after adding the annotation layer.
In the browser — screenshot + markup (no design software)
Drag the .svg file onto a Chrome or Firefox tab — browsers render SVG natively. Screenshot it (Shift ⌘ 4 on Mac; Win + Shift + S on Windows), then open the screenshot in Preview or Snipping Tool and add arrows and text boxes. Fast, no design software needed. The tradeoff: annotations are baked into the image. Your client can't reply to a specific note — they'll email you back and you're back to "the bit on the left."
In the SVG source — XML comments (for developers)
SVG is XML, so any text editor accepts standard comments: `<!-- icon stroke feels too thin at 16px — try 2px -->`. They're invisible in any renderer but readable in the source. This works for design-to-dev handoffs where the developer reads the SVG source anyway. It's not suited for client feedback — most clients won't open a text editor, and there's no reply mechanism.
When your client is the one annotating
The steps above put you in the seat marking up. When a client needs to point at what they want changed, the workflow usually falls apart: you email the SVG; they open it in an image viewer; they screenshot it, circle something in iPhone Markup, and text it back. Now you have a JPEG of a screenshot of your SVG and a message that says "the shape on the right." The cleaner path: share a link the client opens in their browser and clicks directly — notes pin to the exact element, no version confusion.
If the goal is getting a client to mark up the exact element — not adding callouts yourself — drop the SVG into Drafty and share the link. They click the icon or letter shape they mean and pin a note right there. No Inkscape, no email attachment, no "the thing on the left." Every note lands in one thread, on the same link.
Open a live demoQuestions
- Can I add comments inside an SVG file?
- Yes — two ways. In Inkscape, Extensions → Document → Add Comment embeds metadata notes on any object, invisible in the rendered output. Or open the SVG in a text editor and add XML comments directly (`<!-- note here -->`). Both are readable in the source. For visible callouts, use the Text tool in Inkscape or Illustrator to add labels over the artwork.
- How do I annotate an SVG in Inkscape?
- Use the Text tool (T) to add visible callout labels. For embedded notes, go to Extensions → Document → Add Comment, select the object, and type — stored in the SVG XML, invisible when rendered. Draw pointer arrows with the Pen tool or from Object → Symbols.
- How do I add annotation callouts to an SVG in Illustrator?
- Create a new layer above the artwork named Annotations. Text tool for labels, Line Segment tool for pointer arrows. Lock the artwork layer so you don't accidentally move paths. When delivering, turn off the annotation layer before exporting — it stays in your .ai file but doesn't appear in the SVG.
- Can I annotate an SVG without opening it in design software?
- Yes. Drag the SVG onto a Chrome or Firefox tab — it renders like a web page. Screenshot it (Shift ⌘ 4 on Mac, Win + Shift + S on Windows), then annotate in Preview or Snipping Tool. You get a flat annotated image fast. The limit: a client can't reply to specific annotations on a flat file.
- How do I share an SVG with a client for feedback?
- Email works but creates a version problem — the client annotates a screenshot and emails it back, and now you have two files. The cleaner option is a shared link they open in a browser and click directly; notes pin to the element they mean and land in one place.
- What's the difference between annotating and editing an SVG?
- Annotating adds notes or callouts on top of the artwork without touching the underlying vectors. Editing changes the paths, fills, or strokes directly. Most annotation workflows keep a separate layer or use embedded metadata so the deliverable SVG stays clean.
Keep exploring
Stop emailing files back and forth.
Share one link. They comment on the exact spot — no account, always the current version.