swap in AVIFs and use svg header versus png share

Author: knzai

_posts/2024-09-01-svg-ccc.md

@@ -2,11 +2,11 @@
 layout: post
 title: "The holy grail of image formats: SVG cross-codec-compilation & AVIF"
 image:
+  src: '/assets/img/posts/svg-ccc/composite.svg'
   path: '/assets/img/posts/svg-ccc/original.png'
   height: 560
   width: 918
   alt: 'SVG: SVG cross-codec-compilation'
-image: /assets/img/posts/svg-ccc/original.png
 description: >
   Photos and text or diagrams in the same image file, at a small size, without losing cripsness
 toot_id: 113064123926263617
@@ -66,7 +66,7 @@ This will likely get better over time. To make an SVG composite I had to export
 ### Compression time
 Running the highest compression settings on AVIF can be slow. This will get better as computers get faster. You may end up wanting some automated tooling around producing your AVIFs to manage this, or you may want to hand-tune them instead if you are only doing a few at a time anyway. Either way you probably want a decent standalone compressor. I found [ImageTool+](https://apps.apple.com/us/app/image-tool/id1524216218?mt=12) to be well worth the $8 when trying to do a lot of images with different settings.
 ## Final approach
-Ironically, for the header of this post I'm still using the PNG, but that's just till I hack on the jekyll-seo plugin enough to allow me a separate OpenGraph image. Below is the gist of what I ended up on for my ideal SVG, though. The font, gradient, and overlay are all done in SVG making it even easier to swap in different photos. The SVG was autogenerated by Figma then cleaned up a bit via [svgviewer.dev](https://www.svgviewer.dev), which has been super helpful through the whole process of experimenting wiah all these possibilities.  
+Below is the gist of what I ended up on for my ideal composite SVG. The font, gradient, and overlay are all done in SVG making it even easier to swap in different photos. The SVG was autogenerated by Figma then cleaned up a bit via [svgviewer.dev](https://www.svgviewer.dev), which has been super helpful through the whole process of experimenting wiah all these possibilities.  
 
 ```xml
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="918" height="560" fill="none" viewBox="0 0 918 560">