When a Designer's SVG is a PNG in a Trench Coat
Description
A two-panel comic strip illustrating a common friction point between designers and developers. In the top panel, two cartoon figures are in a classroom setting. The one labeled 'Designer' passes a small, neat note labeled 'SVG' to the one labeled 'Developer'. In the bottom panel, the 'Developer' figure has an angry, scowling expression as they look at the unfolded note. The note reveals the content of the SVG file, which is not clean vector code but an '<image>' tag with its 'xlink:href' attribute set to a massive 'data:image/png;base64,...' string, indicating a raster image has been embedded within the SVG wrapper. The humor stems from the developer's frustration at receiving a file that is technically an SVG but completely defeats the format's purpose - being scalable, lightweight, and editable via code - by containing a non-vector, base64-encoded bitmap image. It's a classic case of a technically correct but practically useless asset handoff
Comments
21Comment deleted
That's not an SVG, that's a PNG that went through witness protection and came out with a new file extension and a bloated, uneditable identity
PR diff: icon.svg +6 MB, 9 000 lines of base64 - turns out “scalable vector” just means the designer found a way to auto-scale our CDN bill
After 20 years in the industry, I've learned that 'It's just an SVG' is the design equivalent of 'It's just a simple form' - both translate to 'Here's 10KB of XML that will somehow break IE11, require three polyfills, and make your bundler cry.'
It's vector all the way down - until you open the file and find a base64 PNG cosplaying as an SVG. Infinitely scalable, as long as you only scale to exactly 100%
Nothing says 'collaborative workflow' quite like receiving an SVG that's been through an industrial minifier with embedded base64 PNGs. At least they didn't export it from Illustrator with 47 empty groups and absolute positioning
Every time a designer exports an “SVG” that’s a base64 <image>, a frontend lead writes a new CI rule to fail PRs on bundle size
Designers export SVGs with tree-shaking dreams shattered by 10k nested <clipPath>s - proof that pixel-perfect fidelity is the frontend's original sin
An SVG that’s actually a base64 PNG is the frontend equivalent of microservices sharing a database: technically correct, architecturally a cry for help
АХАХАХАХАХАХАХАХАХАХА Comment deleted
I’ve seen some websites using svg instead of regular images. And read about that improves loading. Does that really improves it? What are advantages of this approach? Maybe someone here knows? Comment deleted
It depends on image. Do you know what vector and rastr images are? Svg could be scaled as you want without losses. And relatively simple images on svg will take significantly less memory then the same jpg when you need to store info for each pixel. Comment deleted
Yes, I know the difference. Website which I was talking about uses svg raster image for banners. Image size is about 8000px width, so I was really surprised with this. I guess, I should compare file sizes of it. Thank you for the answer! Have a nice day. :) Comment deleted
example for good use of SVGs: my website. I got lots of very small icons that should also look good on larger screens: https://riedler.wien/music/ Also the icons get displayed much larger when you click on a song. Comment deleted
Yes but it depends on pictures details. Pictograms are x 1,5 — x 3 smaller and adaptive to any resolution. If you have much pictograms, you can even concatenate them into single SVG to load as one file. As for big pictures you need to compare. Too detailed vector graphics with much effects are heavy for CPU. You need to mention it when it comes to banners. And there is no open standard for SVG animation which is supported by most browsers. The best way to animate objects on website is to use JS library (there are lots of them, choose the one you like). The best way to animate background is to use GLSL shader. You can use tree.js to show them as background. If there are not much calculations on the shader, it's also light enough for GPU (even from the year 2010). All modern browsers can run shaders. Smartphone (but not potato one) can run shader but be careful with resolution, don't make it too big. If you don't know anything about GLSL, you can check lots of them on https://glslsandbox.com/ Check various pages, they are heavily different. Shader can look like a new world if the creator used his potential maximally. Comment deleted
Whoa. Thanks for info! I think it's a bit early for me to getting in GLSL Shaders. But, I hope to get them in future. Added to my todo list. :) Comment deleted
You can use AutoCAD to create your shader and then convert it to GLSL using https://github.com/haplokuon/netDxf and C# Comment deleted
This is the best message I ever saw since I join this group. I will give as many stars as possuble if I could ! Comment deleted
what if we decode its base64? does it give us a human-readable script ? or pixel data ? Comment deleted
Yes, that'd be raw PNG bytes Common way Comment deleted
ah thanks Comment deleted
Lmao Comment deleted