SVG to PNG/JPG

The converter renders rather than upscales. When you load an .svg file it is read as text, parsed with DOMParser, and the intrinsic size is taken first from the viewBox (the third and fourth viewBox numbers) and then overridden by any explicit width/height attributes, falling back to 300x150 if neither is present. At conversion time the SVG text is wrapped in a Blob, turned into an object URL, and loaded into a native Image element, which is then drawn onto a hidden canvas via ctx.drawImage at the full target dimensions. Because the browser rasterizes the vector geometry directly at the output resolution, exporting at 2x, 3x, or 4x produces genuinely crisp pixels at that size, not a blurry enlargement of a small bitmap. Output dimensions come from the scale presets (0.5x, 1x, 2x, 3x, 4x, default 2x) applied to the intrinsic size, or from the Custom Width/Height fields; if you fill only one custom dimension the other is computed to preserve the original aspect ratio.

Three output formats are supported (PNG, JPG, WebP), encoded via canvas.toDataURL, with the JPG button mapped to the image/jpeg MIME type. The Quality slider (10 to 100 percent in steps of 5, default 92 percent) is only shown for JPG and WebP, because PNG is lossless and ignores the quality argument. Background handling matters for transparency: when the background is left as Transparent the canvas is cleared with clearRect so PNG and WebP keep their alpha channel, but a White, Black, or custom-picked color is painted with fillRect before the SVG is drawn. Since JPEG has no alpha channel, exporting a transparent SVG to JPG will composite it onto whatever background color is selected (transparent JPG areas turn opaque), so choosing White or Black before a JPG export is the intended workflow.

A few real edge cases follow from this render-to-canvas approach. Image loading is wrapped in a Promise whose onerror path throws 'Failed to load SVG' and surfaces a 'Failed to convert SVG' toast, which is what you will hit if the SVG references external resources the Image element cannot resolve or that would taint the canvas. Text rendered with system fonts depends on fonts available to the browser, so the safe path for consistent output is to embed fonts or convert text to paths in the source before converting. The tool also includes a View Code toggle that shows the raw SVG source, a live preview against a checkerboard transparency background, and a ShareConfigButton that encodes the format, scale, quality, background color, and custom width/height into the URL so a specific export setup can be shared as a link. This is the inverse of an image-to-SVG tracer: it goes from vector to raster, fixing the resolution at export time.