I’ve been playing around with images and svg in Elements and I’ve come across a few things.
Images
I’ve noticed that I can drag an SVG file into an Image component (as I would expect). I am however having some difficulty in getting any SVG files to display in Elements. I am exporting my images from Affinity Designer, and then running them through SVGO/SVGOMG (https://svgomg.net) to further optimize them and strip out unnecessary cruft introduced by Affinity.
SVG
I am wondering why there’s a separate SVG component when you can use linked svg resources in an image component? One thing I was hoping to see with the SVG component was the option/ability to embed SVG content within the page itself (in-line), and then (ideally) be able to reference any definitions it may contain from other SVG components on the page using the <use href="#id" /> (see https://bryanrieger.com for an example). This does not only create a clear distinction in affordances between the image and svg components, but can also improve load time and reduce layout shift when rendering. It can be used to create a library of reusable assets/icons that can be easily reference both various components on a page without going to the network or the cache.
We need to lock down, and make it more obvious, which types of resources are allowed to be dropped in to the resource dropwell.
Originally we were going to support SVGs in the Image component, however, we found that it complicated the Image component sufficiently enough that it warranted a separate SVG component.
This sounds interesting, pretty advanced, but interesting. I think this might involve quite a bit of work inside Elements the app (rather than the components) to achieve this, so I don’t know that we will get to this in the near future.
SVGs can be pretty complex, and therefor pretty difficult to add styling options to (at least with how some of the controls in Elements currently work), so I know that we are going to hit some “issues” with SVGs and the SVG component that we’re going to have to iron out along the way.
Hi, for me the SVGs are not displayed at all. I place a container (or not) then the SVG container in which I choose an svg image (in this case a test tube icon). No display. I played with the sizes it only displays very temporarily an underline bar which grows or decreases according to my play with the size then I no longer have access to the container by clicking (problem already mentioned in another post). I have to click a little everywhere so that at random the desired container is finally selected.
If you eventually support dropping resources directly from the resources panel to the page/viewport you’ll need to automagically insert the component that best represents that resource.
There’s a simplicity in having a single image component that can be adapted to use png, jpg, gif, webp, and svg files without the user having to pre-select a component specifically for that media type. From the user’s perspective they’re simply adding an image to the page, and Elements determines the best component or variation of, to display that image.
Dropping resources into an image well in the properties panel isn’t a very intuitive way of working. Ideally, if I wanted to change the image on an existing layout I should be able to just drop the new image onto the old one and have Elements ask if I want to replace the image, or add it as a new image.
Support for dropping images from resources will be in the next beta dropping later today. We’ll be auto-detecting other types soon as we just ran out of time today
There’s also the question of will Elements support the <picture> element which would enable images to be swapped at different breakpoints or media queries (very useful for art direction), and provide different sizes/formats for different devices/contexts.
Currently the Image component is actually using <picture>.
I went with that for now as it covered most use cases, however, I know it’s not strictly correct depending on how the user implements the Image component on their site.
We might end up with separate components, or adding options to the Image component to support both <picture> and srcset directly on an img.
