SVG Image
ImagesXML-based vector graphics describing shapes and text. Shapes can scale, but embedded photographs remain raster images. SVG can also contain scripts or external references.
- What it is used for
- Scalable graphics, icons and diagrams
- What the file contains
- Text
All sections, questions and sources
Content reviewed： · Editor：Kai
First: choose for your purpose
SVG describes vector shapes/text. Separate browser viewing, vector editing and PNG delivery. External image references may mean the SVG is not self-contained; script/link handling also matters.
Opening steps
Choose your environment or purpose to see its steps.
Menu labels and support vary by app, OS and version. Preserve the original before making changes.
Troubleshooting by symptom
- Font availability or renderer differences may change text; broken relative image paths can omit graphics.
- For syntax errors, check tags/quotes in the source editor. Renaming a photograph does not turn it into SVG XML.
- Text differs: compare fonts and live text versus outlines; retain an editable master.
- Clipped edges: inspect viewBox, page/export bounds and clipping.
- Missing image: inspect relative resource paths/folder structure and distinguish references from embedded images.
SVG → PNG
- Open SVG in Inkscape and select File → Export (Export PNG Image in older versions).
- Choose page, drawing or selection and pixel dimensions; export PNG and check fonts, alpha and cropping.
- Inspect bounds, dimensions, text, external images and alpha.
PNG loses vector scaling and object editing. Conversion does not repair missing external images or fonts.
Dimensions when rasterizing to PNG
Vectors can be rendered at scale, but PNG fixes pixel dimensions; choose required dimensions/bounds first.
An embedded low-resolution photo gains no detail from vector framing; inspect text, edges and alpha at 100%.
Source for these steps：Inkscape · Exporting a PNG File
Checking whether SVG is self-contained
Check image/font/CSS dependencies and inspect a copy on another environment; share assets according to licenses.
SVG can include scripting unlike a simple photo; handle untrusted input in an appropriate updated environment.
Source for these steps：W3C · Scalable Vector Graphics (SVG) 2
Related-format differences
| Format / choice | Purpose and preserved information |
|---|---|
| SVG | Shape/text descriptions with possible external dependencies. |
| PNG | Fixed-pixel copy without vector editing structure. |
| Print/distribution option requiring font/effect output checks. |
Handling and security
Do not embed an unknown SVG directly in a web page. Check scripts, event attributes and external references before use.
Questions and answers
Does SVG improve photo resolution?
It does not add detail to embedded raster photos; vector shapes are what scale cleanly.
Can I inspect SVG as text?
Yes. Inspect as XML; edit a copy and preserve its structure.
Why does logo text change?
A missing font can be substituted. Review the original export settings.
Can SVG enlarge embedded photos without loss?
Photo detail remains limited; distinguish vectors from raster resources.
Can exported PNG text remain editable?
It becomes pixels rather than editable SVG text; retain SVG.
Format facts: name, steward and MIME type
- Formal name
- Scalable Vector Graphics
- Steward / specification
- W3C
- MIME type
- image/svg+xml
Primary and official sources
- StandardScalable Vector Graphics (SVG) 2
Defines XML graphics; check its publication status on the source page.
W3C · Link checked： - Project documentationExporting a PNG File
Documents selecting export area and pixel dimensions for PNG output from Inkscape; menu labels vary by version.
Inkscape · Link checked：