SVG Viewer
View and preview SVG code with syntax highlighting
1. What is SVG?
SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. Unlike raster images, SVGs can be scaled to any size without losing quality, making them ideal for logos, icons, and illustrations.
2. How does it work?
Paste your SVG code into the textarea. The tool will render a live preview and display the code with syntax highlighting. Adjust the preview dimensions to see how the SVG scales. Use the Copy button to copy the SVG code for use in your projects.
SVG Advantages
- Scalability: Looks sharp at any size or resolution
- Small file size: Typically smaller than equivalent raster images
- Editable: Can be styled and animated with CSS/JavaScript
- Accessibility: Searchable and indexable by search engines
- Performance: No pixelation on high-DPI displays
3. Examples
Simple circle
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>Path element
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M10 10 L90 90" stroke="red" stroke-width="2"/>
</svg>