search

rbuchberger / jekyll_picture_tag

Easy responsive images for Jekyll.
https://rbuchberger.github.io/jekyll_picture_tag/
BSD 3-Clause "New" or "Revised" License
620 stars 103 forks source link

Add SVG support #90

Open JadedBlueEyes opened 5 years ago

rbuchberger commented 5 years ago

At first I didn't see the point of doing this-- SVGs are vector images, so they never need to be resized. That said, apparently there's nothing wrong with putting an SVG in a source tag, which allows us to use art direction and serve up different images to different screen sizes.

It'll need a new srcset format (which will be just a link to the SVG file). We won't give it to imagemagick for processing, we'll just copy it from the source directory to the output format.

ftab commented 5 years ago

This would be helpful for one of my pages which has nice small SVGs for browsers which support it but PNGs for those which don't for whatever reason. SVG images could still be optimized - strip extraneous tags and comments and whatnot from the generated file, while keeping the original source pristine

rbuchberger commented 5 years ago

It appears that Imagemagick does understand SVGs and can create PNGs from them, so that part can be done. Optimizing SVGs would require another dependency, and I'm not sure that falls in the scope of this plugin.

Pull requests are certainly welcome here!

JadedBlueEyes commented 5 years ago

https://github.com/vlastavesely/svgmin/blob/master/svgmin#L17 Converts to plain SVG, minifies XML and gzips it. The main part is minying the XML, and I'm sure there are libraries for that.

rbuchberger commented 5 years ago

According to the readme, that script requires the user to have inkscape installed; I really don't want to add that dependency to this project. I think you'd be better off with a dedicated SVG optimization plugin, which feeds into this plugin. Then you'd get the best of both worlds!

I'm super busy with other projects right now so I'm not sure when I can get to adding this functionality, but it's on my list and I'll get to it when I can. Thanks for yall's patience!

JadedBlueEyes commented 5 years ago

According to the readme, that script requires the user to have inkscape installed; I really don't want to add that dependency to this project.

Inkscape is only used for normalising the SVG. The code for minifying the XML is pure ruby and looks to be some regexy majic. TBH, built-in SVG miniying is not needed. What I came to this project for was a simple egenrator that genereated the images in a picture tag, ordered by file size, so the browser could pick the best one for it. For example, if I had cartoon.svg, it would convert it into formats, like:

it would then order them and the original by size, eg:

it would then put them into a picture tag, with a configurable fallback.

​<picture>
  <source srcset="cartoon.svg" type="image/svg+xml">
  <source srcset="cartoon.webp" type="image/webp">
  <source srcset="cartoon.jpg" type="image/jpeg">
  <source srcset="cartoon.png" type="image/png">
  <img src="cartoon.png">
</picture>

I got better than that, with auto-resizing, caching, config and more. The only thing that is missing, is just converting SVGs to the other formats. That's all that needs to happen, and as Imagemagick understands SVGs, it should be easy.

I'm super busy with other projects right now so I'm not sure when I can get to adding this functionality, but it's on my list and I'll get to it when I can. Thanks for yall's patience!

that's OK, I'll give it a go myself tomorrow.