Chris Harrelson in a new message in this old thread about SMIL deprecation in Chromium:
SMIL was not deprecated and there are no plans to do so. It's still a supported feature in Chromium.
Yeah, really happy for https://play.esviji.com ! 🥰
I've been in love with SVG for a while, even created a full game with completely fluid and responsive graphics.
There are 18 contents with this tag:
Chris Harrelson in a new message in this old thread about SMIL deprecation in Chromium:
SMIL was not deprecated and there are no plans to do so. It's still a supported feature in Chromium.
Yeah, really happy for https://play.esviji.com ! 🥰
I updated the footer on https://nicolas-hoizey.photo/ with nice icons for the other platforms where I publish photos, and the services I use to build and deploy the site.
Some where hard to find, most were not optimized (thanks SGVOMG!).
The Pixelfed one is reaaaaaly heavy with all these gradients, masks and paths.
I wonder why there are not so many Web games using mostly HTML, CSS and #SVG for the UI, with all the #responsive power they have… 🤷♂️
This live demo is more than 6 years old: https://play.esviji.com/wow/
(Remove wow
at the end to really play… 😅)
SVG sprites: old-school, modern, unknown, and forgotten
Let’s try to remember why we needed SVG sprites in the first place, then see what other less-known options are available and how they might be useful.
⚠️ Be carefull if you use SVGO or SVGOMG to optimize #SVG images using <symbol>
s.
There's a bug that might remove them when it shouldn't:
https://github.com/svg/svgo/issues/1726
Responsive Logo Composition With SVG
This is not a recent article, but it's still very useful, I should have shared it earlier!
Which SVG technique performs best for way too many icons?
Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages.
Responsive SVGs - container vs media queries
Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML.
Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.
A 7 years old bug in #Firefox … 😭
https://bugzilla.mozilla.org/show_bug.cgi?id=1027106
I know there are workarounds.
Accessible SVG Icons with Inline Sprites
Standing on their own, icons can be misinterpreted […]. The most important issue though: they lack text. Text is the most accessible format for information on the web. Screen readers understand text best and the same applies to most assistive technology, such as translation apps and Braille displays. So, if we have anything on our web page that’s not text — like icons — we must add text that gives our users the same information. Otherwise we could exclude people from understanding our interfaces.
I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.
Anyone knows which browsers support the href
attribute in #SVG <use>
tags without the xlink
namespace?
Couldn't find the information in #CanIUse.
I'm not interested (this time) in support in SVG editors or other tools, just browsers.
A new technique for making responsive, JavaScript-free charts
I really like this clever use of a mix of SVG[1] and HTML/CSS to create responsive charts.
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.
Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website:
esviji v2 sera complètement responsive
Voilà plus d'un an que je travaille sur une nouvelle version de mon jeu esviji développé en technologies Web, et plus particulièrement en SVG. Avant la sortie prochaine de cette v2 sur tous vos écrans, voici déjà un petit teasing de son interface devenue complètement responsive.
Des animations Web sans CSS ni JavaScript ? C'est possible !
Pour faire des animations sur le Web, tout le monde sait que l'on peut utiliser CSS si l'animation est prédéfinie, ou JavaScript si elle dépend d'un contexte particulier (éventuellement en générant de la CSS). Si c'est du SVG que l'on veut animer, il est possible d'utiliser en plus SMIL.
There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉
See all tags.