For so many things a vector based image / icon is way better than a pixel based one. Yes, jpeg for actual pictures of stuff, but icons and so on want to be drawn not imaged.
So a simple example, FireBrick config pages, as they have always been, using road signs... I am used to them. But on my 5k mac I did not realise they are maybe "blurry"...
Maybe I need to blow that up a bit - screens shots on my Mac... Still these are bitmap screen shots.
Impressively different, but the latter can be blown up indefinitely as it is vector graphics...
So really all icons need to be SVG, it is cool, and it just works.
P.S. here is what happens when CQM graphs are done as SVG!
P.P.S. I have actually spent two whole days on this, annoyingly - largely because it is a bugger to test, and even testing locally you then want to test on hundreds of different graphs for several hours, any which point you find something is like half a pixel out when you zoom in - arg, bring back pixels, all is forgiven. Anyway, several firebrick alpha releases today. Looking damn good, and yes, we will be rolling this awesomeness out to A&A customers over the coming weeks.
I always struggled to convince my boss that we should do SVGs for all web graphics, and then one day he wanted the website printing out 8ft tall for an exhibition... Never had a problem since :)
ReplyDeleteI liked the look of SVG for a project a decade or so ago, can't remember quite why.
ReplyDeleteThen I looked at which browsers (and thus which IT departments) supported it.
Has that situation improved since then?
I believe so... I think it is pretty standard now.
DeleteIE9+
DeleteFirefox etc since 2005
Chrome etc since 2006
Edge
I'd say that's usable in the real world now.
Yeah, even Microsoft finally admitted they couldn't get away with a non-working proprietary alternative.
DeleteSVG is great.
If you're doing embedded stuff then it's worth nothing they gzip very nicely. On a little home project I'm saving flash by pre-gzipping all the assets and delivering them gzipped over HTTP (so no encoding has to be done by the 'server' device). Neat trick :)
ReplyDeleteIn terms of other cool little-known technologies, have you heard of WebRTC? It allows encrypted, UDP-based encryption between peers (even behind NAT at both ends), and let's you do awesome stuff such as: https://webtorrent.io/
ReplyDeleteI like the new CQM Graphs
ReplyDeleteOnly just realised, looking at your screenshots, the labels in the supplementary plates don't line up horizontally! I guess you are centering the text vertically, rather than having a fixed baseline, so the descenders make things move about. Afraid I've not used my firebrick for ~10 years (it's an original one, it can't do the bandwidth necessary today) and had forgotten what they looked like!
ReplyDeleteWas a toss up whether to do baseline or centre and we went for centre...
DeleteExcellent... I'm busy converting my png code to svg.
ReplyDeleteWill you be embedding the XML data within the svg graphic itself as opposed to being some kind of overlay as at present?
A tool tip, but that does not seem to work when the svg is used as an img rather than embedded in the page, so not sure yet.
DeleteAha, this is a problem I have previously solved. Rather than img/src I use embed/src. In the tooltip I set
Deleteg visibility="hidden"
set attributeName="visibility" begin="foo.mouseover" end="foo.mouseout" from="hidden" to="visible"
and g id="foo" in the triggering item.
(Obvious compromised syntax to avoid using greater-than and less-than signs.)
Interesting. I wonder if just title works when used as embed. There are 900 tool tips and if every one has that level of code it is going to be a big file :-)
DeleteI include the svg source directly into the web page source. And yes, the web page will get very large, but at least you will then be able to extract the svg image itself with all the data.
ReplyDeleteIf you have a look at the bottom image on https://www.bgcomp.co.uk/svg/im.html - IPv6 only, you'll see how I did it. There are 2 popups, on "Home" and in the middle blue rectangle. Still an ongoing project...
ReplyDeleteSo, what's the betting on https://github.com/svg/svgo being able to produce smaller SVGs than your code can?
ReplyDeleteWell, I am making improvements anyway, but would be interesting to see.
Delete