🚸 🩹 SVG support for author's image

[wolfspyre]

sidestep image resizing operations when using a vector image for the author's image.. Pretty straight forward.

I didn't see anyplace else that these images are in use.
Did I miss anything?

[netlify]

✅ Deploy Preview for hugo-congo ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	984bb01
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-congo/deploys/653b1439162460000845261f
😎 Deploy Preview	https://deploy-preview-687--hugo-congo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jpanther]

I think working towards SVG support all round is good, however this PR has the opposite issue to the other one where now we're removing the size restriction but still imposing one on normal image assets. I'm a big believer in being strict about keeping things consistent as it prevents confusion for users.

[wolfspyre]

an SVG will (USUALLY) fit itself into the parent container.

The problem we're working with here is the resizing methods hugo provides for images don't support vector images, as you don't really RESIZE a vector asset in the same way one would manipulate a raster image resource,

in this scenario, you're asking hugo to transform the initial image asset to 2x the <img> resource dimension properties,
and then declaring the image resource with set w/h.

for reference, I put the image I used in that page here:
https://dog.wolfspyre.io/wplimgs/Atticus-in-square-frame.svg

it's viewbox dimensions in the file itself is 430x430, but it sizes itself according to the html <img> tag's dimensions
which ARE still present:

author.html:

        <img
          class="!mb-0 !mt-0 me-4 h-24 w-24 rounded-full"
          width="96"
          height="96"
          alt="{{ $.Site.Author.name | default "Author" }}"
          src="{{ $authorImage.RelPermalink }}"
          {{ if $.Site.Params.enableImageLazyLoading | default true }}
            loading="lazy"
          {{ end }}
        />

profile.html:

        <img
          class="mb-2 h-36 w-36 rounded-full"
          width="144"
          height="144"
          alt="{{ $.Site.Author.name | default "Author" }}"
          src="{{ $authorImage.RelPermalink }}"
        />

The change only sidesteps the .Fill image method operation, which is a raster-resizing operation that's not relevant to vectors...

this make sense?

[wolfspyre]

closed in favor of #741