Contents tagged “SVG”

There are 18 contents with this tag:

1. • Nicolas Hoizey
   • 8 February 2023
   • animation, Chromium, esviji, SMIL, SVG
   • permalink

   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 ! 🥰

2. • Nicolas Hoizey
   • 26 January 2023
   • icon, SVG
   • 13 reactions
   • permalink

   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.

3. • Nicolas Hoizey
   • 18 December 2022
   • esviji, game, responsive, SVG
   • 2 reactions
   • permalink

   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… 😅)

4. 

   Vadim Makeev

   SVG sprites: old-school, modern, unknown, and forgotten

   • Nicolas Hoizey
   • 13 December 2022
   • SVG, sprite
   • 4 reactions

   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.

5. • Nicolas Hoizey
   • 13 December 2022
   • image, SVG, WebPerf
   • 14 reactions
   • permalink

   ⚠️ 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

   

6. 

   Tyler Sticka

   Responsive Logo Composition With SVG

   • Nicolas Hoizey
   • 4 December 2022
   • SVG, responsive
   • 7 reactions

   This is not a recent article, but it's still very useful, I should have shared it earlier! Logos are an ideal use-case for SVG. […] But what if we…

7. 

   Tyler Sticka

   Which SVG technique performs best for way too many icons?

   • Nicolas Hoizey
   • 30 October 2021
   • SVG, WebPerf
   • 7 reactions

   Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages. Just yesterday, I chose to inline…

8. 

   Maarten Van Hoof

   Responsive SVGs - container vs media queries

   • Nicolas Hoizey
   • 4 June 2021
   • SVG, responsive, CSS
   • 7 reactions

   Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML. Responsive…

9. • Nicolas Hoizey
   • 19 May 2021
   • CSS, Firefox, SVG, WebPerf
   • 2 reactions
   • permalink

   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.

10. 

    Marco Hengstenberg

    Accessible SVG Icons with Inline Sprites

    • Nicolas Hoizey
    • 20 November 2020
    • SVG, accessibility
    • 20 reactions

    Standing on their own, icons can be misinterpreted […]. The most important issue though: they lack text. Text is the most accessible format for information…

11. How I build my SVG sprites

    • Nicolas Hoizey
    • 15 October 2020
    • SVG, WebPerf, Node
    • 38 reactions

    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.

12. • Nicolas Hoizey
    • 28 April 2020
    • CanIUse, SVG
    • 10 reactions
    • permalink

    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.

13. 

    Rich Harris

    A new technique for making responsive, JavaScript-free charts

    • Nicolas Hoizey
    • 31 January 2020
    • SVG, Svelte
    • 1 reaction

    I really like this clever use of a mix of SVG and HTML/CSS to create responsive charts. Because we're using a percentage-based coordinate system,…

14. 

    Michelle Barker

    Optimising SVGs for the Web

    • Nicolas Hoizey
    • 28 January 2020
    • SVG, WebPerf

    Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […]…

15. 

    Cassie Evans

    Creating my logo animation

    • Nicolas Hoizey
    • 30 July 2019
    • CSS, SVG, animation

    Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website: There's a few things going on…

16. esviji v2 sera complètement responsive

    • Nicolas Hoizey
    • 10 March 2015
    • game, responsive, SVG, esviji

    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…

17. Des animations Web sans CSS ni JavaScript ? C'est possible !

    • Nicolas Hoizey
    • 19 December 2014
    • animation, SVG, esviji
    • 19 reactions

    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…

18. Responsive Icons with SVG

    • Nicolas Hoizey
    • 31 October 2013
    • SVG, design, CSS, responsive
    • 15 reactions

    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.