Upload or paste any SVG file, edit fill colors, stroke, dimensions, and viewBox, then optimize and minify stripping editor bloat up to 70% smaller. Export clean SVG or convert directly to a React JSX component. No signup, 100% free.
Change fill, stroke, dimensions, and viewBox with live preview on light and dark backgrounds
Strip metadata, comments, and Inkscape attributes. Minify to a single line. See before vs after size instantly
Export a React-ready JSX component with all hyphenated attributes converted to camelCase automatically
Upload an SVG file or paste raw code. Use the Edit tab to change colors and dimensions, the Optimize tab to strip bloat and compare sizes, and the Source tab to edit code directly. Copy the clean SVG or JSX output instantly.
Live Preview
Colors
Dimensions
Format: min-x min-y width height
Quick Tips
• Upload any .svg file or paste code in the Edit tab
• Fill and stroke apply to the root <svg> element
• Use Optimize tab to strip editor cruft before shipping
• JSX output wraps the SVG in a reusable React component
• ViewBox controls the coordinate system — width/height control rendered size
Optimized SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="#3b82f6"><polygon fill="#3b82f6" stroke="#1d4ed8" stroke-width="2" points="50,10 61,35 90,35 68,57 79,82 50,65 21,82 32,57 10,35 39,35"/></svg>
No account required — 100% free
SVG files exported from Figma, Illustrator, or Inkscape carry significant baggage: editor metadata, proprietary namespaces, nested group IDs, and redundant attributes that serve no purpose in a browser. A 12 KB icon from Illustrator often shrinks to 2 KB after proper optimization without any visible change in rendering. This tool handles that optimization in your browser, alongside direct color editing, dimension control, and one-click JSX conversion for React projects.
SVG (Scalable Vector Graphics) is an XML-based image format that describes graphics using mathematical shapes paths, circles, polygons, and curves rather than pixel grids. This fundamental difference from raster formats (PNG, JPEG, WEBP) gives SVG three properties that make it indispensable for UI development:
SVG renders at perfect sharpness on any display standard screens, Retina displays, 4K monitors, or printed at 300 DPI. A single SVG icon replaces a complete @1x/@2x/@3x PNG asset set.
An icon drawn with 3–4 path elements is often under 500 bytes as SVG far smaller than any equivalent PNG. For icons, logos, and UI illustrations, SVG consistently wins on file size.
Inline SVG elements respond to CSS (color, opacity, transform, animation) and JavaScript exactly like HTML elements. You can animate paths, change fill colors on hover, and respond to click events none of which is possible with img-embedded SVGs.
The way you embed SVG in a webpage determines what you can do with it. Three main approaches exist each with distinct trade-offs.
<img src='icon.svg'>: Simplest to use. The SVG loads as a separate HTTP request and renders as a static image. You cannot style it with CSS or manipulate it with JavaScript. Fill and stroke colors are fixed at the values in the file.CSS background-image: url('icon.svg'): Useful for decorative icons in CSS. Same limitations as the img tag no CSS styling of SVG internals, no JavaScript access, no color inheritance from the parent element.Inline SVG (pasted directly into HTML): The SVG element becomes part of the DOM. You can target any path or shape with CSS, change fill on hover, animate with CSS keyframes, and trigger JavaScript events. This approach enables icon systems where a single color variable controls every icon in the UI. This editor outputs clean inline SVG ready to paste.SVG files from design tools contain large amounts of data that browsers ignore completely but still must parse and transmit. Each unnecessary byte increases page weight, parse time, and time to interactive. Here's what this editor removes and why each matters:
Inkscape, Illustrator, and Figma embed application-specific data in <metadata>, <title>, and <desc> elements, plus namespaces like xmlns:inkscape, xmlns:sodipodi, and xmlns:dc. Browsers render the SVG identically without these they exist purely for round-trip editing fidelity in the originating application.
Design tools and developers sometimes leave <!--comments--> in SVG files. Comments are invisible in rendering but fully present in the transmitted file. On icon-heavy pages with dozens of inline SVGs, removing comments across all files eliminates meaningful kilobytes.
Inkscape generates id attributes for every element (path4532, g8921) and data-name attributes from layer names. Unless your JavaScript references these IDs, they waste bytes and clutter the DOM. Removing them reduces file size and keeps the DOM clean for DevTools inspection.
Minifying collapses all whitespace — newlines, indentation, spaces between attributes into a single compact line. Human-readable formatting is essential for editing but serves no purpose in production. A well-formatted 4 KB SVG icon often minifies to 1.2 KB with no quality loss.
Every operation in this editor runs entirely in your browser using JavaScript string processing and the browser's native SVG rendering engine. No file leaves your device.
JSX requires camelCase for all multi-word HTML attributes. SVG attributes use hyphenated names that are valid XML but invalid JSX. Dropping a raw SVG into a React component produces immediate errors. This editor converts every hyphenated attribute automatically:
Raw SVG (invalid in JSX)
<path stroke-width="2" stroke-linecap="round" fill-rule="evenodd" clip-path="url(#clip)" />
JSX output (valid React)
<path strokeWidth="2" strokeLinecap="round" fillRule="evenodd" clipPath="url(#clip)" />
The JSX output wraps the SVG in an exportable React component that accepts className and spread props, making it immediately usable as a reusable icon component in any React, Next.js, or Remix project.
Figma exports include xmlns:xlink, data-name attributes from layer names, and nested groups from Auto Layout. Running a Figma export through this editor typically reduces file size 40–60% and removes all the noise before the SVG enters your codebase.
Use the JSX output tab to convert each icon to a standalone component. The generated component accepts className for Tailwind utility injection and spread props for aria-label and other accessibility attributes.
SVGs pasted into JSX fail silently when attributes like stroke-width or fill-rule are present. Use this editor to convert an SVG to valid JSX before adding it to a component, eliminating the most common cause of invisible SVG rendering errors in React.
When a Lighthouse report flags large SVG assets, paste each file into this editor's Optimize tab. The before/after size comparison immediately shows which files have the most optimization headroom and which are already clean.
The viewBox attribute makes SVG scale correctly in any container. Without it, width and height attributes are absolute and the SVG won't respond to CSS sizing. Format: viewBox='minX minY width height' most commonly '0 0 24 24' for 24px icon grids.
Set fill='currentColor' on the root svg element. The icon inherits the CSS color property of its parent, making it automatically adapt to dark mode, disabled states, and any color context without requiring JavaScript or separate icon variants.
Inline SVGs are invisible to screen readers unless you add role='img' and aria-label='Description' to the svg element, or include a <title> element as the first child. Decorative icons that don't convey information should use aria-hidden='true' instead.
If you use the same SVG icon more than twice on a page, define it once as an SVG <symbol> in a hidden sprite sheet and reference it with <use href='#icon-name'>. This renders identically but sends the path data to the browser exactly once, regardless of how many times the icon appears.
Upload your SVG file using the Upload SVG button, or paste the raw SVG code directly into the Edit tab textarea. Use the color pickers to change fill and stroke colors, the sliders to adjust stroke width, and the dimension fields to resize the SVG. Every change updates the live preview instantly. When you're satisfied, copy the edited SVG from the output panel or download it as an .svg file no Adobe software required.
SVG optimization removes four categories of data that browsers ignore during rendering: metadata elements (<metadata>, <title>, <desc>) that store application-specific information; HTML comments; editor-specific attributes from Inkscape (inkscape:label, sodipodi:nodetypes) and other tools; and unnecessary whitespace through minification. All of these are safe to remove for production web use. The visual output is identical to the original you can verify this directly by comparing the preview before and after enabling optimizations.
After uploading or pasting your SVG, click the 'JSX Component' tab in the output section. The editor automatically converts all hyphenated SVG attributes to their camelCase JSX equivalents: stroke-width becomes strokeWidth, fill-rule becomes fillRule, clip-path becomes clipPath, and so on. The output is a complete exportable React function component that accepts className and spread props. Copy the output and paste it directly into a new .jsx or .tsx file in your React project.
Design tools prioritize round-trip editing fidelity over file size. Figma exports include data-name attributes from every layer, xmlns:xlink namespace declarations, and sometimes nested group structures from Auto Layout. Illustrator adds its own metadata namespace, document history, and grid settings. Inkscape includes its entire node editor state. None of this data affects how the SVG renders in a browser, but all of it bloats the file. Using this editor's Optimize tab with all options enabled typically reduces Figma exports 40–60% and Illustrator exports 50–70%.
The viewBox attribute defines the SVG's internal coordinate system using four values: min-x, min-y, width, and height. It tells the browser what region of the SVG's coordinate space to display and how to scale it. Without a viewBox, the SVG has no intrinsic scaling width and height attributes are treated as fixed pixel dimensions and the SVG won't scale when you change its CSS size. With a viewBox (e.g., 0 0 24 24), you can set the SVG's display size to anything in CSS and it will scale proportionally with perfect sharpness. Always set viewBox on SVGs intended for responsive or variable-size use.
Clean, optimized SVGs load faster, integrate cleanly into React components, and behave predictably in production. Upload your first file above and see the size reduction in seconds no account, completely free.
Free forever · No account · SVG & JSX output
Every tool runs entirely in your browser no uploads, no servers, no accounts. Fast, private, and free forever.
Colors, typography, CSS, SVG & more
Generate beautiful color schemes using color theory algorithms monochromatic, complementary, triadic, and more.
Build stunning CSS gradients visually linear, radial, and conic and copy production-ready code instantly.
Discover expert Google Fonts combinations curated for optimal readability and aesthetic harmony.
Generate production CSS visually flexbox, grid, typography, border, and box shadow with live preview.
Upload, edit, optimize, and convert SVG files entirely in your browser. Export clean SVG or React JSX.
Images, accessibility, spacing & readability
Compress images up to 90% smaller WebP, AVIF, JPEG, PNG with filters, cropping, and rotation. 100% private.
Remove image backgrounds instantly using on-device AI no uploads, no account. Download transparent PNG.
Generate a mathematically consistent shadow elevation system and export CSS variables or Tailwind config.
Build a harmonious spacing scale based on mathematical ratios and export it as CSS or Tailwind config.
Preview and compare border radius values in real time across multiple shapes and sizes.
URLs, QR codes, tracking & security
Shorten any URL instantly with browser history, QR code export, and zero server tracking.
Custom QR codes for URLs, WiFi, vCards & more. Add colors, logo, download PNG or SVG.
Build GA4-ready UTM tracking URLs with smart presets, validation, and CSV history export.
Strip 50+ tracking parameters (UTM, fbclid, gclid, msclkid) with before/after comparison.
See how your URL appears on Twitter, Facebook, LinkedIn & WhatsApp. Check OG metadata.