Overview

The SVG viewer is an online tool for real-time previewing of SVG code and converting it to PNG images. You can adjust canvas size, background color, scale, and offset while previewing, then download as PNG.

How to Use

1. Paste the SVG code into the SVG Code area or select a sample.
2. Set the canvas Width and Height (in pixels) under Canvas Settings.
3. Specify a Background Color, or enable Transparent Background.
4. Adjust Scale and X Offset / Y Offset (drawing position offsets) under SVG Settings.
5. Preview the result and click Download as PNG to save the image.

Specifications & Glossary

• SVG (Scalable Vector Graphics): An XML-based vector image format (W3C standard). Because shapes are defined mathematically, images remain sharp at any size, independent of resolution.
• PNG conversion mechanism: Uses the browser's Canvas API to rasterize SVG. Renders the SVG to a Canvas with drawImage(), then converts it to PNG data with toDataURL('image/png').
• Scale: The zoom factor for rendering SVG. The default is 100%, and you can output at 200% for Retina displays.
• X Offset / Y Offset: The number of pixels to shift the SVG drawing position in the X and Y directions. Used to adjust the placement within the canvas.
• Transparent background: Since PNG supports an alpha channel (transparency), icons and logos can be output with a transparent background.
• Canvas size: Determines the pixel dimensions of the output PNG. Default is 256×256 pixels.

Use Cases

• Converting SVG icons created in design tools to PNG.
• Creating and verifying assets such as OGP images and favicons.
• Previewing and debugging SVG paths and animations.