Loading…
Loading…
Preview SVG code live and safely, check its size and viewBox, fix common errors, and export it as PNG, a data URI, a CSS background, or an <img> tag.
The rendered SVG appears here as you type. Click Sample to try it.
Paste a valid SVG to get an embeddable version.
Paste SVG markup, drop an .svg file on the input, upload one, or load it from a URL. The preview updates as you type, so you can tweak paths, colors, or the viewBox and see the result immediately.
Switch the background between a transparency checkerboard, white, and dark to check how the image holds up. Zoom from 25% to 800% to check fine detail. The status bar shows the rendered size, viewBox, element count, and file size.
If the markup isn't well-formed XML, you get the parser's error with its line and column. Click it to jump to the problem. SVG copied out of HTML often lacks the xmlns namespace; the viewer adds it for you and tells you it did.
Download the SVG, or export a PNG at 1×, 2×, or 4× for places that don't accept vectors. For inlining, copy it as a URL-encoded or Base64 data URI, a CSS background-image rule, or an HTML <img> tag.
Yes. SVG can contain scripts and event handlers, so this viewer never inserts your markup into the page. It renders it as an image instead (an <img> with a data: URL), and browsers don't run scripts or load external files for images. If the SVG has scripts or external references, a note says so. Nothing is uploaded to a server either.
HTML is forgiving and standalone SVG isn't. As a file or image, SVG must be well-formed XML and declare xmlns="http://www.w3.org/2000/svg". The viewer adds a missing namespace (and xmlns:xlink when xlink:href is used) automatically. Unclosed tags, unescaped & characters, or mismatched quotes are reported with their line and column.
Use URL-encoded for SVG in CSS or HTML. It's usually 20–30% smaller than Base64, compresses better with gzip, and stays readable. Base64 is the safe choice for places that mishandle special characters, such as some email clients or older tools. Both give the same image.
The PNG uses the SVG's own size: width and height when set, otherwise the viewBox, otherwise the browser default of 300 × 150. That size is multiplied by the scale you pick, so a 24 × 24 icon at 4× becomes 96 × 96 px. Transparent areas stay transparent.
Most likely it references external files: an <image> linking to another URL, or a web font loaded from elsewhere. Browsers don't fetch external resources for SVG shown as an image, so those parts render blank (or as a broken-image icon) here and anywhere else the SVG is used as an image. Embed the resource as a data URI to make the SVG self-contained.
Data
Format, validate, and minify JSON in your browser. Paste it, upload a file, or load it from a URL. Errors show the exact line and column.
C# / .NET
Paste JSON and get C# model classes or records, ready for System.Text.Json or Newtonsoft.Json. Nested objects, arrays, nullable types, dates, and GUIDs are inferred for you.
SQL
Format and beautify SQL queries for SQL Server (T-SQL), PostgreSQL, MySQL, Oracle, and more. Set the indentation, keyword case, and layout, and get the exact line of any syntax error.
Text
Compare two texts or code files side by side, with changed words highlighted. Ignore whitespace or case, and export a unified .diff patch that git apply accepts.
Images
Create QR codes for links, Wi-Fi logins, email, phone, and SMS. Set error correction and colors, then download a crisp SVG or PNG. Static codes, no tracking, no sign-up.