SVG Viewer & Editor

View, edit, optimize and export SVG files online.

UploadLoad from URL

Samples

Code

6 lines · 379 B

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="48" fill="#fde047" stroke="#a16207" stroke-width="2"/>
  <circle cx="35" cy="40" r="5" fill="#1f2937"/>
  <circle cx="65" cy="40" r="5" fill="#1f2937"/>
  <path d="M30 60 Q50 80 70 60" stroke="#1f2937" stroke-width="4" fill="none" stroke-linecap="round"/>
</svg>

Preview

100%

Info

File

Size: 379 B
Minified: 366 B (−3%)
Dimensions: —
Animations: No

Elements

—

Colors (0)

—

Export

Width (px)Height (px)Scale

Data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDgiIGZpbGw9IiNmZG…

React component (JSX)

export function IconSvg(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="48" fill="#fde047" stroke="#a16207" strokeWidth="2"/>
      <circle cx="35" cy="40" r="5" fill="#1f2937"/>
      <circle cx="65" cy="40" r="5" fill="#1f2937"/>
      <path d="M30 60 Q50 80 70 60" stroke="#1f2937" strokeWidth="4" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

Was this tool useful?

Your vote is saved on this device only.

About SVG Viewer & Editor

Paste or open an SVG and see it render instantly, then dig into the underlying markup to tweak paths, fills, dimensions, and attributes without hunting through code in a separate editor. You can clean up bloated exports from design tools, fix oversized files, and download a tidy result ready to drop into a project.

It is built for developers, designers, and anyone who works with vector graphics and wants a quick way to inspect or fix an SVG. The tool is completely free and runs entirely in your browser, so your files are never uploaded to any server and the work stays private on your own machine.

How to use

Paste your SVG code or open an .svg file from your device.
Check the live preview to confirm the graphic renders as expected.
Edit the markup directly to adjust paths, colors, sizes, or attributes.
Optimize the SVG to strip redundant data and shrink the file.
Export the result and save the cleaned SVG to your computer.

Features

Live preview alongside editable markup
Optimize and shrink bloated SVG files
Direct editing of paths and attributes
Export clean SVG ready to use
Runs fully client-side, nothing uploaded

Frequently asked questions

Are my SVG files uploaded anywhere?

No. Everything happens locally in your browser, so your files never leave your device and nothing is sent to a server.

What does optimizing an SVG actually do?

It removes redundant metadata, comments, and unneeded precision left behind by design tools, producing a smaller file that renders the same.

Can I edit the SVG code directly here?

Yes. You can modify the raw markup, including paths, fills, viewBox, and other attributes, and watch the preview update.

Will optimizing change how my graphic looks?

Optimization aims to keep the visual output identical while cutting file size, but you can always compare against the live preview before exporting.

Is the tool free to use?

Yes, it is completely free with no account or sign-up required.

Related tools

JSON Formatter / Validator

Format, minify, and validate JSON with syntax highlighting.

Base64 Encoder / Decoder

Encode plain text to Base64 or decode it back.

URL Encoder / Decoder

Percent-encode and decode URL components.

export function IconSvg(props: React.SVGProps<SVGSVGElement>) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> <circle cx="50" cy="50" r="48" fill="#fde047" stroke="#a16207" strokeWidth="2"/> <circle cx="35" cy="40" r="5" fill="#1f2937"/> <circle cx="65" cy="40" r="5" fill="#1f2937"/> <path d="M30 60 Q50 80 70 60" stroke="#1f2937" strokeWidth="4" fill="none" strokeLinecap="round"/> </svg> ); }