SVG vs PNG vs HTML for Device Illustrations
Choose SVG for scalable still artwork, PNG for a raster image, or standalone HTML for supported interactive models.
SVG and PNG are still images. Standalone HTML keeps a model’s controls.
Available files and controls vary by model. Check its page for download options.
Choose SVG for scalable artwork
SVG is a vector image that stays sharp when scaled. Use it for layouts, presentations, and web graphics in tools that support SVG.
Whether you can edit individual elements depends on the file and your design tool.
Choose PNG for a raster image
PNG is a pixel image supported by most tools and publishing systems. Choose it for a fixed-size still or when your workflow does not accept SVG.
Transparency varies by asset. Check the exported image if you need a transparent background.
Choose HTML to keep supported controls
A standalone HTML viewer lets you use controls such as view, theme, and model-specific motion in a browser.
HTML is available for selected models. Open the downloaded viewer in a modern browser to use its controls.
A quick format choice
A product page hero often needs to fit different screen sizes, so SVG is a practical choice. PNG works well for an image in an email.
Questions
Which format should I use in a webpage?
Use SVG or PNG for a still image. Use standalone HTML for a model’s controls; it is available for selected models.
Can I edit every SVG part separately?
It depends on the file and your design tool. Some SVG elements may not be separately editable.
Does every PNG have a transparent background?
Transparency varies by asset. Check the exported PNG if you need a transparent background.