Edit SVG markup with live rendering, syntax highlighting, and instant preview.
Type or paste your SVG markup in the code editor.
Watch the SVG graphic update as you edit the code.
Save the final SVG file for use in your project.
SVG is a text format: the code is the drawing, so the fastest way to work on one is to edit the code and watch it render. This tool puts a highlighted markup pane next to a preview pane that redraws on every change, following standard SVG rendering rules, so what you see is what a browser will draw. The first surprise most people hit: SVG has no layout. An svg element without width or height falls back to a 300 by 150 pixel canvas, and anything drawn outside it is clipped, not resized.
A concrete input and expected output from the current implementation.
Input
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" fill="#0A84FF" stroke="#000000" stroke-width="4"/> </svg>
Expected output
The preview renders a 200 by 200 canvas with one shape: a solid #0A84FF blue circle, 160 units in diameter, centered in the frame. Its fill edges sit exactly 20 units from the left, right, top, and bottom. The 4-unit black stroke straddles the outline and paints 2 units beyond the radius on every side, so the outermost painted pixels fall at 18 and 182 units, inside the canvas, so nothing is clipped.
The render follows directly from the attributes: cx and cy place the center, r sets the radius, and the viewBox maps the 200-unit coordinate system onto the 200-pixel canvas one-to-one. The margins (200 minus 160, halved) and the stroke overhang (half of stroke-width) are plain arithmetic on those values.
Every change re-parses the full document, not just the edited line. SVG markup is XML, and XML well-formedness is all-or-nothing: one unclosed tag or unquoted attribute value invalidates the whole document, so a broken line can blank the entire preview, not only the element you touched. The same parse drives the syntax highlighting, so a structural mistake usually surfaces there first.
width and height set the on-screen canvas; viewBox sets the coordinate system the drawing lives in, and the browser scales one onto the other. viewBox="0 0 200 200" on a 200-pixel canvas maps each user unit to one pixel; viewBox="0 0 100 100" on the same canvas doubles every coordinate. preserveAspectRatio decides how the drawing fits when the two aspect ratios differ: letterboxed, cropped, or stretched.
Check two things. First, well-formedness: one unclosed tag or unquoted attribute anywhere invalidates the whole XML document, so nothing renders. Second, geometry: shapes drawn outside the canvas are clipped, so confirm your coordinates fall inside width, height, and viewBox. Removing elements one at a time isolates the culprit quickly.
width and height set the canvas size; viewBox sets the coordinate system the drawing uses. With viewBox="0 0 100 100" and width="200", every user unit paints two pixels. With neither attribute, the canvas is 300 by 150 pixels; with only a viewBox, it is 300 wide and the height follows the viewBox aspect ratio, so "0 0 100 50" yields a 300 by 150 canvas.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.