Research notes

SVG to PNG: why the text changes, and which size to export

We converted nine public SVGs, flags, logos and diagrams, to PNG and WebP at three sizes, and tracked what happened to the fonts on the way.

Updated 24 September 2026

Wikimedia Commons’ large periodic table asks for a font called DejaVu Sans. Our test Mac doesn’t have it, so when we turned the file into a PNG every element name came out in the stand-in font, about 11% narrower, and 14.7% of the picture’s pixels changed. Nothing warned us, because nothing broke: the text was all there, just in someone else’s lettering.

That was on 24 September 2026, with our SVG to PNG tool in Chromium 153 on macOS, using nine public SVGs from Wikimedia Commons: three flags, three logos and three diagrams. The tool now names the missing font on each file before you convert it. This page covers why the text changes, and how big the PNG gets at each size.

Why the text changes

An SVG usually names its font instead of carrying it. Design apps write something like font-family="DejaVu Sans, sans-serif" and leave the rest to whatever draws the file. A converter draws it with the fonts it can reach, and when the first name isn’t among them it moves down the list. For the periodic table that meant the default sans-serif font, which on our Mac is Helvetica.

Word widths in DejaVu Sans against the stand-in font, both measured at 100 px in Chromium 153 on macOS, 24 September 2026 (n=6 words from the periodic table)
WordDejaVu SansStand-in (Helvetica)Change
Rutherfordium721 px634 px12.2% narrower
Praseodymium744 px667 px10.4% narrower
Roentgenium667 px595 px10.9% narrower
Seaborgium602 px539 px10.5% narrower
Mercury405 px361 px10.9% narrower
Hydrogen486 px434 px10.8% narrower

Narrower is the lucky direction. Swap the fonts the other way and names that fitted their boxes run over the edge. The shapes change too: a different font has different letter widths, weights and spacing, so a logo set in a brand typeface loses the thing that made it a logo.

We checked the five files in our set that have text. Three named fonts this Mac doesn’t have: the periodic table (DejaVu Sans), a simplified periodic table chart (Noto Sans) and a graph of the normal distribution, whose labels ask for SVGTimes. The other two asked only for Arial and Times, which this Mac has. On a Windows or Linux machine the list would be different, and that is the whole problem: the same SVG turns into different PNGs on different computers.

Fonts from the web don’t load at all

Some SVGs pull their font from a URL, the same way a web page does. We made a test file that loads one of our own site’s fonts that way. Opened as part of a web page, Chromium fetched the font. Drawn as an image, which is how our tool and most converters that run in a browser draw SVGs, Chromium never requested it, and the output was pixel for pixel the same as a copy of the file with the font line deleted. The same rule blocks pictures linked from other files. It is also what makes an untrusted SVG safe to convert: nothing inside it can reach the network.

Two things do survive. Fonts installed on the device are used, and a font packed into the file itself, as a data URL, loads fine. We packed DejaVu Sans into the periodic table that way, about 1.5 MB of font files in a 172 KB drawing, and the tool stopped reporting a missing font. Converting the text to outlines in your design app (Inkscape and Illustrator both have it) is the smaller fix, and the one we’d use for a logo: the letters become shapes, and shapes look the same everywhere. For a diagram you still need to edit, keep a copy with live text.

1×, 2× or 4×: what each costs

An SVG has a size written into it, and the tool’s 1× is that size. 2× has four times the pixels, 4× has sixteen. The files don’t grow as fast as the pixels. For eight of our nine files, 2× PNGs were 2.2 to 2.8 times the size of 1× and 4× were 4.9 to 7.8 times, because a larger drawing has the same edges spread over more flat colour, and flat colour compresses well.

PNG size at each scale, every pixel exact (OxiPNG), WipeTheAI SVG to PNG in Chromium 153, 24 September 2026 (n=9 SVGs from Wikimedia Commons). Last column: lossless WebP at 2×
SVG (size at 1×)SVG file1× PNG2× PNG4× PNG2× WebP, lossless
US flag (1235×650)823 B10.8 KB25.4 KB61.3 KB6.1 KB
Brazil flag (1000×700)4.1 KB30.1 KB75.0 KB176.7 KB30.7 KB
EU flag (900×600)791 B6.9 KB34.7 KB84.6 KB12.6 KB
SVG logo (300×300)4.1 KB12.3 KB28.0 KB61.1 KB14.7 KB
Tux, the Linux penguin (216×256)48.8 KB23.7 KB60.7 KB158.8 KB43.2 KB
Inkscape logo (128×128)22.5 KB13.2 KB36.3 KB103.3 KB24.7 KB
Kepler’s laws diagram (400×429)3.6 KB26.2 KB62.5 KB142.9 KB39.7 KB
Normal distribution graph (720×460)61.4 KB34.9 KB76.2 KB170.1 KB39.7 KB
Large periodic table (1090×644)172 KB213 KB515 KB1.13 MB248 KB

The EU flag was the odd one: its 2× PNG was five times its 1×. We counted its colours. At 1× the whole flag, stars and their soft edges included, uses 246, few enough for PNG to store each pixel as one byte from a list of up to 256. At 2× it uses 263, just over the limit, so every pixel takes four bytes. Our Smaller file setting would bring it back under; the 2× flag dropped to 10.0 KB that way.

Export 2× unless you know better. It is sharp on phone and laptop screens with dense pixels, and at 25 to 75 KB for a flag or a logo it costs little. Go to 4× or a set width for print, or for a slot you know is large, and stay at 1× only for icons that will be shown at exactly their written size.

PNG, WebP or JPG

Lossless WebP was smaller than PNG on all nine files at 2×, by 29% (Tux) to 76% (the US flag), with every pixel kept. Lossy WebP at quality 90 went the other way on flat artwork: the US flag came out at 57.8 KB, nine times its lossless WebP. It only won on the two shaded logos, Tux and Inkscape’s, where it was 56 to 66% smaller than lossless. JPG at quality 90 was the largest format for every flag and diagram, 137 KB for the US flag at 2×, more than five times the PNG, and it has no see-through areas. Use SVG to JPG only when the place you’re sending the picture refuses everything else.

One more number, because it explains some bloated PNGs you may have seen. The PNG that Chromium itself writes from a drawing, before our tool’s optimiser runs, was 126 KB for the US flag at 2×, five times the 25.4 KB file you download. If an SVG exported from another tool looks oddly heavy, running it through Compress images with Every pixel exact usually brings it down without changing a pixel. For logos with a handful of colours, the Smaller file setting for PNG goes further: the Brazil flag dropped to 17.2 KB at 2×.

Sources

  1. Wikimedia Commons: Periodic table large.svg
  2. Wikimedia Commons: Simple Periodic Table Chart-en.svg
  3. Wikimedia Commons: Normal Distribution PDF.svg
  4. Wikimedia Commons: OSI Model v1.svg
  5. Wikimedia Commons: Kepler laws diagram.svg
  6. Wikimedia Commons: Flag of the United States.svg
  7. Wikimedia Commons: Flag of Brazil.svg
  8. Wikimedia Commons: Flag of Europe.svg
  9. Wikimedia Commons: SVG Logo.svg
  10. Wikimedia Commons: Tux.svg
  11. Wikimedia Commons: Inkscape Logo.svg
  12. DejaVu fonts 2.37 (the font the periodic table asks for)