How do I view an SVG file?

Paste SVG code directly into the textarea, upload an .svg file, or click the Sample button to load a demo SVG.

Can I download SVG as PNG?

Yes. The SVG is rendered to a canvas and exported as PNG. You can also download the original SVG or copy it as a Data URI.

Can I generate React or React Native code from SVG?

Yes. Click 'React' to get a JSX component string or 'React Native' to get an RNSvg component string. Copy with one click.

Does it support transformations?

Yes. You can rotate, flip horizontally, flip vertically, and adjust the zoom level of the preview.

Back to Tools

SVG Viewer

View, transform, and export SVG files — download as SVG/PNG, copy as Data URI, and generate React & React Native components.

SVG Viewer

Preview • Transform • Export • Code Generation

Icons

Color:

Size:

24 32 48 64 128

SVG Code

Preview

Zoom: 100%

Paste SVG code or upload a file to preview

How to Use

Paste SVG code, upload an .svg file, or pick one from the Icons sidebar.
Preview updates instantly. Use the zoom slider to adjust size. Use toolbar buttons to rotate or flip.
Export as SVG, PNG, JPEG, or WebP. Copy SVG code or as a Data URI.
Generate a React JSX or React Native component from your SVG.
Prettify to format the code, Minify to compress it, or Fix ViewBox to add a proper viewBox attribute.

Tip: The icon sidebar loads ~80 popular Lucide icons (MIT licensed) from the Iconify API. Click any icon to load it instantly. PNG/JPEG/WebP exports rasterize at 2x for crisp output. All processing is client-side.

Milind Daraniya

SVG Viewer

SVG Viewer

Icons

SVG Code

Preview

Export

Copy

Code Generation

Utilities

How to Use