How to Edit SVG Code: A Developer's Quick Reference

SVG Is Just Text: Open in Any Editor

SVG files are XML text files. Open any SVG in VS Code, Notepad++, or even Notepad. You'll see a structured document starting with <svg>. Everything is human-readable. Understanding the key elements lets you make edits without design software.

Common Edit 1: Change a Color

Find fill or stroke attributes in the SVG and change the hex value. Colors can be inline attributes or CSS styles inside a <style> block.

• Inline attribute: <path fill='#FF0000'> — change the hex value directly
• CSS style: <style>.cls-1 { fill: #FF0000; }</style> — change the value in the style block
• Shorthand colors: 'red', 'blue' etc work but hex is more precise
• Use VS Code's color picker (hover over a hex value to see the picker) for easy editing

Common Edit 2: Resize the SVG

Change the width and height attributes on the root <svg> element, or adjust the viewBox.

• <svg width='200' height='200'> — change pixel dimensions
• viewBox='0 0 100 100' — defines the coordinate system; adjust to crop or pad
• Remove fixed width/height to make the SVG 100% of its container (responsive)
• Never change only width without height unless the SVG uses preserveAspectRatio

Common Edit 3: Add CSS Classes

Add class attributes to SVG elements to target them with external CSS: <path class='primary-color'>. Then in your CSS file: .primary-color { fill: var(--brand-color); }. This enables dynamic theming of SVG icons.

Common Edit 4: Remove Elements

Delete unwanted parts of an SVG by removing the XML elements. Common removals: background rectangles (<rect fill='white'>), metadata blocks (<metadata>...</metadata>), hidden elements (display:none), and editor namespaces (sodipodi:, inkscape:, dc: elements).

Common Edit 5: Add Accessibility

Add a <title> element as the first child of <svg> for screen reader support: <svg aria-labelledby='titleId'><title id='titleId'>Description of icon</title>...</svg>. Add role='img' and aria-hidden='true' for decorative icons.

Frequently Asked Questions

Related guides