Online SVG Editor

The width and height attributes set the displayed size. The viewBox defines the internal coordinate system used by paths and shapes. If an icon has viewBox="0 0 24 24", setting its width to 48 does not mean every coordinate must be doubled. Keep the viewBox when resizing a scalable icon. Changing only one dimension can alter the aspect ratio; review the result before downloading.

Use the live preview to check one change at a time. For a stroke icon, try changing stroke-width rather than scaling the path data. For a filled icon, inspect fill attributes and any style rules before replacing a color. A rule in an embedded stylesheet can override an attribute, so a change in the code may not immediately change what you see.

This SVG editor online is useful when you already have markup and know which attribute to change. You can adjust dimensions, inspect paths, correct a fill or stroke, and format code for readability. The Format button loads a formatter when requested; formatting is a separate action from compressing an SVG. Keep an original copy so you can compare your edits.

For drawing new artwork, selecting objects or editing nodes visually, open the full VectorCraft workspace. This focused tool does not replace its canvas controls. After editing, download the SVG and open it in the application where you intend to use it. Text, external assets and browser rendering can behave differently in other applications; a successful preview is one check, not a guarantee of identical rendering everywhere.

Try a simple stroke icon before editing a detailed illustration. In this free SVG editor, open the sample or paste your own SVG markup, then locate the root svg element. Leave its viewBox unchanged and set width and height to the display size you need. Change one stroke color in the source and compare the preview. If nothing changes, search for a style attribute or embedded CSS rule that controls the same element. Undo that single edit before trying another approach.

A blank preview is a reason to inspect the source, not to discard your artwork. Check that the document contains an svg root, that tags and quotation marks are closed, and that visible shapes fall inside the viewBox. A white shape can also disappear against a white background. Formatting helps you read nested groups, but it cannot repair every malformed document or recreate a missing image.

Once the SVG editor online shows the expected result, download a new copy and open it separately. Check its dimensions, stroke thickness and transparent areas at the size used by your website or document. Keep the original file alongside the edited copy. For the next step, use the color changer for repeated palette replacements, the optimizer for compact delivery markup, or SVG to PNG for a fixed pixel image.