use avif for header and change slug

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

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "The holy grail of image formats: SVG cross-codec-compilation & AVIF"
-image: /assets/img/posts/svg-ccc/compilation.svg
+image: /assets/img/posts/svg-ccc/100.avif
 description: >
   Photos and text or diagrams in the same image file, at a small size, without losing cripsness
 toot_id: 113064123926263617
@@ -32,7 +32,7 @@ Lossless avif of the whole file cut it down to to 413kb while taking it all the
 
 You can of course adjust to wherever in between.  If you want really crisp lines for a decent size, you could also try using a webp image in place of a png with the avif. Really, though, if you truly want lines that crisp, you should already be using a vector instead anyways. Since we were already using a SVG for the compositing, lets just do everything but the photo in the svg itself, and then layer in a well-compressed AVIF for the photo.
 
-This is the result I ended up on for this header. The font, gradient, and overlay are all done in SVG making it even easier to swap in different photos (svg autogenerated by Figma then cleaned up a bit via [svgviewer.dev](https://www.svgviewer.dev)).  
+This is the result I ended up on for this header, originally (I ended up using an AVIF after all, for now, so I didn' have to deal with hacking the jekyll plugin to use a separate image for the OpenGraph share. I'll probably swap back to the smaller and crisper svg-ccc). The font, gradient, and overlay are all done in SVG making it even easier to swap in different photos (svg autogenerated by Figma then cleaned up a bit via [svgviewer.dev](https://www.svgviewer.dev)).  
 
 ```xml
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 918 560">