Streaming live at 10am (PST)

Usage of SVG vs PNG


#1

I'm currently working on a site and have PNGs for social icons as well as some other graphic pieces. The problem is in order to use the HiDPI option I have to add them at twice the size necessary and then the sites speed test grade starts to drop fast. Even setting an actual width and height only helps slightly of course. Using the non - HiDPI doesn't actually seem to make that much difference on Retina displays...at least not smaller devices (haven't tested on larger).

The nicest solution is using SVG instead of PNG but there isn't an easy fallback method when hosting with Webflow or is there? Not sure I really need fallbacks for this as long as I've assigned height and width for the image and adjust the container for smaller screens.

Curious if anyone has a solid, tested best practice for this with Webflow. Or what are others doing?

Jason


#2

I try to work full SVG now, only reason why I still use Sketch. Dimensions are easy to set. I wish Webflow will allow for SVG color change in the near future, doing this still requires quite some code.

When I work for native mobile apps, I take the time to produce all the graphics for every resolution: I design at scale 1:1 and produce @2x and @3x in either png or svg. But for web, I'll say I rarely do it, because as you said, it doesn't seems to make that much of a difference. I'll do it for the main hero photo for a site that is heavily graphic, but most of the time, I don't.


#3

I say use SVG with no fallback. Everyone has it.

You can also use SVG as an embed in Webflow, and it will render in the designer. Webflow's support of SVG and viewport units is why I pay for it.


#4

Do you mind to elaborate a little about this?


#5

It's unsupported, but I've found both VW and VH units to be usable in the designer if you manually enter them. Try setting a section height to 50vh, for instance. You can even set a font size in VW for responsive font sizing. It's very handy if you don't want your text wrapping on smaller viewports.


#6

@vitaligent I'm moving that direction but saying everyone has it ... is a big leap for me. I've looked at that chart a few times over the last months and it's data is a bit misleading or at least I think it is...Android browser usage may appear low on this but other data indicates that out of mobile phones the Android built-in browser is used over 12% in the US (if I remember correctly)...but I haven't found any solid data about what versions. I'm assuming its pretty low and am probably ready to make the leap. Even newer versions of IE have issue if no width/height is assigned...hmm..annoying.
http://gs.statcounter.com/#mobile+tablet-browser-ww-monthly-201402-201502

@vincent I've been saving SVG out of Illustrator and it works okay I've never really used Sketch but have been thinking about giving it a go. I tend to "hand draw" graphics in Illustrator and haven't looked into Sketch too much.


#8

Couldn't have come at a better time this article as I'm about to use SVG now for my new logo on webflow.

Maybe @thesergie and @brryant know if this is a good idea or not, or in the near future they could add in something down the image panel settings if a user uploads a SVG file that makes another row appear under your uploaded SVG file saying "upload fallback image/png" with another upload button - that way its best for all website viewers.

I don't know how easy that would be of course smile

Cheers


#9

@OvertonGraphics I sampled my logo out last week via SVG and found that their were some negative speed grade issues. Not sure why other than no gzip compression.


#10

I've used SVG's instead of PNG's whenever possible mainly because they're vector and can be scaled to any size without worrying about image degeneration. Either work - just depends on which one will be smaller in the end.

Whenever I use PNG's i always compress them using http://pngmini.com/ which cuts down my file size by half or more (depending on how many colors are needed for that image). I'm sure there's SVG compression out there that strips the unnecessary Illustrator comments.


#11

Sorry to revive this topic... What do you guys use to create the SVGs? Sketch? Illustrator's saved SVG is nasty. It appears SVG is supported pretty widely but scaling issues on IE (is that true?).

Using SVGs in t Webflow, do you just add as a png? How do you take advantage of change the color and such...is that by using embedded code?


#12

Illustrator and Sketch handle SVGs well. For now we just create separate SVGs if they are different colors for websites.


#13

I wish Webflow will allow for SVG color change in the near future

You and me both! :smile:


#14

I must not be handling something correctly with Illustrator and SVG save because the file size for one artboard and one SVG item is like 200kb where the same png is 32kb. And it makes the speed test drop by 5%.

Using Sketch the file size of the SVG is much improved but using a font as part of a logo renders badly(heavy wiht little detail)....however this is my first trip into Sketch so maybe someone could give me a tip on how to correct.


#15

SVG Optimizer: https://jakearchibald.github.io/svgomg/


#16

@Mogeek thanks that will help in handling the size of the Illustrator SVG :grinning:

Still wish I could sort out the font render issue in Sketch...just starting well but hopefully it's not just a trip down the rabbit hole.


#17

Hi @jdesign,

200kb for a svg is huge have you checked your settings in illustrator mine are usually around 2kb - 20kb.

Best
Ahmad


#18

Sketch has a good SVG export, and it's handy for those prep and export task. But absolutely not on par with AI to design them and do pixel perfect vector work. Affinity Designer exports way better SVG than AI, but it's not a UI tool so I don't use it.

Pasting inline SVG code in a Webflow HTML widget and adding a mini CSS to it is quite very and you get the preview in the designer.

About the fonts: SVG can retain fonts, so if you're aiming at vector icons, you need to outline all your fonts beforehand. And the best is to do this in AI... All the design in AI then a copy paste into your Sketch doc, where you organize everything for export.


#19

Thanks @vincent I think for the program info.

I outline my fonts but still having an issue with one looking slightly blurry. I'll figure it out.

Thanks.


#20

One last question, are you guys using any fallbacks?


#21

Me, no. I explain to my clients that I'm going to use SVG, how well it's supported, what are the possible downsides, and that I'll use spcially crafted pixel perfect PNGs for UI icons. (but anyway, I tend to use my SVG on a pixel perfect size anyway). That's their choice to be on par with that or ditch it entirely. But when the decision is taken, I do'nt use any fallback.

3 years and a half on SVG now and never I had a feedback of anything not working. Maybe in 2016 I'll stop making such a big deal about it.