Skip to main content
Topic: SVG instead of PNG (Read 1958 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

SVG instead of PNG

Had a somewhat crazy idea, but I think I should ask the "themers" folks first:

Would it be OK for you, if we would use SVG (just in some areas, not overall) instead of plain PNG images? Did a quick mockup with the off.png (the svg version is attached, needs to be renamed to off.png  ;) ).

There are some cool advantages compared to PNG:
1) it's scalable (screen resolution doesn't matter)
2) it's styleable via CSS (for example, changing colors could be done in index.css )
3) HTML5 supports inline SVG (would reduce the amount of HTTP requests)
4) It can be modified via Javascript (allows animated SVG...)

On the opposite:
1) it may be more complex to replace the SVG (especially inline SVG) for a themer.
2) ..

Oppinions please?
Thorsten "TE" Eurich
------------------------

Re: SVG instead of PNG

Reply #1
1) Not sure scalable is relevant, since for most images (icons and the like) you'll still want them the same size regardless of res. Only difference might be touchscreen, where you may want some larger (but probably not).
2) Styleable might be handy.
3) Sounds like that would defeat 2), or am I missing something (have never used svg). Less http requests is good, but there's always sprites......
4) Ohh, goody. Eye candy and code overload. :D


On the opposite:
1) Yup.
2) Armadillos.
3) What does IE do?

ETA: Thought - the scalable bit could be a handy way of handling images for Retina/other-stuff-with-odd-pixel-ratios. Maybe.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG instead of PNG

Reply #2
IE: who cares?  :D IE9 +10 have got build-in SVG support, AFAIK.  IE8 and older would need the Adobe SVG plugin.
I think some places (e.g. the pie charts on the profile stats) could benefit from SVG, others probably not (smileys, bbc icons, message icons).

Re animation: might be useful for loading bars.
Thorsten "TE" Eurich
------------------------

Re: SVG instead of PNG

Reply #3
Well I don't personally care about IE, apart from the fact that it infests my OS and I have to keep patching it, but some nutters apparently do care about it. If there's a plug-in for it, no worries.

Could do animations with css3. Would need a fix for IE9 and 8, but there's probably a nifty bit of js that would do it. Or, even just a transform on the width of a child element would do it (just considering options here).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: SVG instead of PNG

Reply #4
I say fonts is the best way to go, but I'll most likely get flamed for saying that. http://fontawesome.io/

Re: SVG instead of PNG

Reply #5
Fonts take too much space for only one obvious benefit (retina stuff), and they're super hard to redo. Even sprited images are a pita. Single images are the way to go if you ask me. Once they're properly handled of course. The SMF way was no good. I don't know what elk does so I can't say anything.

Re: SVG instead of PNG

Reply #6
Not going to flame since I have very little knowledge about the general things going "design-wise", but I feel that fonts are (technically) a cheat and easy way out for something else (and Nao's post partially confirms that).

I mean: fonts are not graphics. Fonts are a way to *write*, not to make graphics. At least not in a "traditional" way and hence the "easy way out" part: fonts have been forced to do something they are not intended to just because it was the easiest way to make things look nice on some devices/browsers.

At least that's my hypothesis without knowing much else, there are plenty of tools for make graphic, there are plenty of solutions (png, svg) to make *good* graphic, so there is no real technical reason to use fonts... At least I can't see any...
Bugs creator.
Features destroyer.
Template killer.

Re: SVG instead of PNG

Reply #7
Yes the original reason was for ie7 and ie8 (iirc) to properly support svg images.

Re: SVG instead of PNG

Reply #8
meh...
MS has always been a PITA. :P

Well, at least now we have much better browser and we could even ignore some of them. O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: SVG instead of PNG

Reply #9
With font icons you can easily change size, color, shape, text-decorations, or add transformations, or add animations. Anything you can do with text, you can do with a font icon. The font file can be cached by the browser, which reduces HTTP requests and loading time. Not to mention large font collections are a crap load smaller in file size compared to sprites and use less ram.

Truth be told flat icons are in high demand at the moment, especially with the whole metro trend in web design. Flat icons are easier to recognize then icons with depth, which is why mobile devices are beginning to go in that direction. Heck, even computer software is beginning to go in that direction.

You can see an example of the growing support for font icons here: http://css-tricks.com/flat-icons-icon-fonts/ and that article more than a year & half old. If you go over to themeforest, or mojo themes, you will see that 99% of the themes just coming out in high demand are using font icons. I hear even vBulletin5 plans to use font icons in a future release.

Also, take a look at this example of use: http://css-tricks.com/examples/IconFont/

It seems to me that in the past SMF community have been excellent in development areas, but lacking in design area. I'd hate to see Elkarte suffer the same issues. The modern trend in design is: Responsive, Vertical & Horizontal design depending on portrait/landscape mode and screen resolution, Invisible UI, Flat Icons(mostly used in conjunction with font-icons), and diverse Typography.

BTW, only the latest mobile devices support SVG: http://caniuse.com/#search=svg

Re: SVG instead of PNG

Reply #10
Thanks for the links, interesting reading.  I've personally not done much with fonts, but IchBin did point me at font awesome and its pretty interesting what you can do.  

Not sure I'm on board with all your reasons (ram, bandwidth, cache) everything has its tradeoffs and to often these measurements are of dubious quality or benefit to the end user.  I think its enough that its new and therefor fun to explore and play with, it provides a new look and a way to do things.  Although not font icons per say, we do use several glyphs where appropriate, and adding those via css beats adding in all the img tags.   Actually I think it would be fun to do a theme using the fonts.
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

Re: SVG instead of PNG

Reply #11
I'm happy as long as someone is willing to research and take a good hard look at it before making a decision.

BTW, aren't glyphs and font icons in essence the EXACT same thing? One is just native and one is not.