SVG Editor & Optimizer
Upload or paste SVG files to view, edit path data, change colours, resize the viewBox, and optimise the markup. The built-in optimizer removes unnecessary attributes, comments, and editor metadata to reduce file size. Compare before and after sizes, then download or copy the optimised SVG - all running locally in your browser.
Drop SVG file here or click to browse
Supports .svg files - all processing is local
Preview
SVG Code
Why Use Our SVG Editor & Optimizer?
Upload, Preview & Edit SVG Code
Upload any SVG file or paste raw SVG markup to view a live preview. The built-in code editor lets you directly edit path data, adjust stroke and fill attributes, and modify the SVG document in real time - with changes reflected instantly in the preview panel.
Change Colours & Styles
Easily modify fill and stroke colours across the entire SVG using colour pickers. Update the viewBox dimensions to resize the canvas, and adjust common attributes like stroke-width, opacity, and inline style properties - giving you full control over your graphic without needing to hunt through raw code.
One-Click Optimisation
Clean up your SVG with a single click. The optimizer removes unnecessary attributes (XML namespace declarations, empty groups, unused IDs, editor metadata), strips comments and whitespace, and merges adjacent path nodes. The before/after size comparison shows exactly how much you saved.
Download or Copy Optimised SVG
Download the final SVG file or copy the optimised markup to your clipboard. The editor preserves all visual elements while reducing file size - perfect for web development, design handoff, or preparing SVGs for production. All processing runs locally with no uploads.
Common Use Cases for SVG Editor & Optimizer
Web Development & SVG Cleanup
Web developers use the editor to clean up SVGs exported from design tools like Figma, Sketch, or Illustrator. Remove the dozens of unnecessary attributes and editor metadata that bloat SVG files, reducing bundle sizes without affecting visual output - perfect for icon systems and illustrations.
Path Editing & Customisation
Developers and designers edit SVG path data directly in the code editor to tweak shapes, adjust Bézier curves, or fix rendering issues. The live preview shows every edit instantly, making it easy to refine path coordinates, simplify overlapping nodes, or merge adjacent paths.
Colour & Style Theming
Quickly change an entire icon set or illustration's colour scheme using the fill and stroke colour pickers. Replace generic #000000 fills with your brand colours, adjust opacity for layered effects, or update stroke widths for better visibility - all without editing each element manually.
Resizing & ViewBox Adjustment
Resize SVG graphics by adjusting the viewBox dimensions. The editor calculates the aspect ratio and lets you set custom width and height while preserving proportions. Useful for generating responsive icons, making SVGs fit specific containers, or preparing assets for different screen sizes.
Design Handoff & Asset Preparation
Designers preparing SVG assets for developer handoff use the optimizer to strip unnecessary code while preserving visual fidelity. The before/after size comparison provides concrete proof of optimisation - share the clean, production-ready SVG with confidence.
SVG Compression for Performance
Performance-minded developers compress SVG files before adding them to websites or apps. The optimizer removes redundant attributes, merges paths, and eliminates whitespace to produce the smallest possible SVG that renders identically. The size savings chart shows the impact of each optimisation.
Understanding the SVG Editor & Optimizer
What is an SVG Editor & Optimizer?
An SVG editor and optimizer is a tool for viewing, editing, and optimising Scalable Vector Graphics (SVG) files. SVGs are XML-based vector image formats widely used on the web for icons, illustrations, logos, and diagrams. Our SVG Editor & Optimizer lets you upload or paste SVGs, edit the raw markup with live preview, change colours and dimensions, and optimise the file to remove unnecessary bloat - all running entirely in your browser with no server uploads.
How Our SVG Editor & Optimizer Works
- Upload or Paste: Drag and drop an SVG file onto the upload area, or paste raw SVG markup directly into the code editor. The preview panel renders the SVG in real time so you can see exactly what you are working with.
- Edit & Customise: Use the colour pickers to change fill and stroke colours across the entire SVG. Adjust the viewBox dimensions to resize the canvas while preserving the aspect ratio. The live preview updates instantly with every change.
- Edit Raw Code: The code editor lets you modify the SVG markup directly - change path data, update attributes, add or remove elements, and fine-tune the document structure. The preview updates as you type, giving you full control.
- Optimise & Download: Click the Optimise button to automatically clean up the SVG. The optimizer removes unnecessary attributes, strips comments and whitespace, merges adjacent paths, and eliminates editor metadata. Compare the before and after file sizes, then download the optimised SVG or copy the markup.
What the SVG Editor Shows
- Live Preview: A real-time rendered preview of the SVG that updates instantly as you edit the code or change colours and dimensions. The preview automatically scales to fit the available space while preserving the aspect ratio.
- Code Editor: A text area showing the full SVG markup with syntax highlighting support. Edit any part of the SVG directly - paths, attributes, metadata, or structural elements.
- Colour Controls: Fill colour picker and stroke colour picker with hex input and preview swatches. Apply colours globally to all applicable elements in the SVG at once.
- ViewBox Controls: Width and height inputs for adjusting the SVG viewBox dimensions. The aspect ratio lock preserves proportions when resizing.
- Before/After Comparison: Shows the original SVG file size and the optimised SVG file size side by side, with the savings percentage highlighted.
Privacy & Data Processing
This SVG Editor & Optimizer runs entirely in your browser with no server-side processing. Your SVG files, code edits, and optimised output never leave your device - there is no upload to any server, no data storage, and no analytics tracking of your SVG content. All optimisation and colour transformation logic is implemented using standard browser APIs. The editor works offline after the initial page load. This tool is for general SVG editing and optimisation purposes and is not a replacement for professional vector graphics software for complex illustration work.
Related Tools
Meeting Time Zone Planner
Find overlapping working hours for participants in different time zones - visual 24-hour timeline, 60+ IANA time zones, DST-accurate, up to 8 participants - Free online meeting planner
Meeting Agenda Builder
Create structured meeting agendas with time slots, presenter assignments, and notes. Export as plain text or PDF - Free online meeting agenda builder.
Meeting Scheduler (Availability Matrix)
Plan your week by entering available time slots across multiple days. Set meeting duration and buffer preferences, then generate an optimised weekly timetable that maximises focused work time - all running locally in your browser, no signup required. Free online Meeting Scheduler.
Task Deadline Calculator
Calculate the actual deadline considering working days only. Enter a due date, exclude weekends and holidays (with country presets), and see the number of working days remaining. Also calculates backwards: if a task takes N working days, when should you start?
Frequently Asked Questions About SVG Editor & Optimizer
An SVG (Scalable Vector Graphics) file is an XML-based vector image format used extensively on the web. Unlike raster images (PNG, JPG), SVGs scale infinitely without losing quality. You might need to edit SVGs to change colours to match brand guidelines, remove unnecessary code added by design tools, resize the viewBox for responsive layouts, or fix rendering issues in the raw path data.
The optimizer removes: unnecessary XML namespace attributes (like xmlns:xlink and xmlns:serif), empty group tags (<g>), unused IDs and classes, editor metadata (like Sketch or Illustrator export data), XML comments, excessive whitespace and indentation, and empty style attributes. It also attempts to merge adjacent path nodes where possible. The result is a visually identical SVG with a significantly smaller file size.
Yes. The code editor shows the full SVG markup - you can edit path data (d="..."), change attributes, add or remove elements, and modify the document structure. The live preview updates automatically as you type, so you can see the effect of every change instantly. This is especially useful for fine-tuning paths or making targeted edits that the visual tools cannot handle.
Use the Fill Colour and Stroke Colour pickers to apply new colours across the entire SVG. The colour picker supports hex values and shows a colour swatch. The editor automatically updates all applicable fill and stroke attributes in the SVG markup. You can also manually edit colour values directly in the code editor for per-element control.
Adjust the viewBox Width and Height inputs to resize the SVG canvas. The editor calculates the original aspect ratio and preserves it when you change dimensions. Changing the viewBox effectively changes the coordinate space of the SVG - useful for fitting the SVG into a specific container or generating responsive icons at different sizes.
No. All SVG processing - uploading, editing, colour changes, optimisation, and download - happens entirely in your browser using standard browser APIs. Your SVG data never leaves your device. There is no server upload, no data storage, and no analytics tracking of your SVG content. The tool works offline after the initial page load.
After clicking the Optimise button, the tool shows the original SVG file size alongside the optimised file size, along with the percentage reduction. This gives you concrete proof of the optimisation - for example, reducing an SVG from 12.5 KB to 4.2 KB (66% savings). The comparison helps you evaluate whether the optimised version is suitable for production use.
No. This is a lightweight SVG editing and optimisation tool designed for quick edits, colour changes, and file size reduction. It is not a full vector graphics editor and cannot create complex illustrations from scratch, apply filters, or handle layered design work. For advanced editing, use professional tools like Adobe Illustrator, Figma, or Inkscape, then clean up the exported SVG here.