0

I'm a UI designer working and I want to get a better understanding of what is required for the most efficient and streamlined way to handover of assets to developers - both for the developer and also for me.

I was of the understanding that since SVG files are lossless, they can be resized "on the fly" using CSS/HTML and therefore can just be supplied once (instead of at all the various sizes) - is this a reasonable assumption?

I work with very detailed pages where there are a lot of instances of the same icons and I'm trying to avoid having to "mark for export" (I use Adobe XD) every single instance of an icon on every page. My preference is to provide a master UI file which contains once single instance of each icons in the project.

Any thoughts / input appreciated!

I have not been able to try anything because I'm not a developer and can't see how this works in the code.

thepixellator
  • 1
  • 1
  • Usually, yes. If your SVG simply wraps a raster image then it doesn't magically make that raster image infinitely scalable for instance. – Robert Longson Jan 19 '23 at 09:42
  • Thanks for your input. Could you just clarify what you means by "wraps a raster image"? I understand that raster images are not scalable but not sure exactly what it means if the SVG wraps this image. I would only use icons that are SVGs, containing no rastered elements. – thepixellator Jan 19 '23 at 11:30
  • source: https://en.wikipedia.org/wiki/SVG : **S**calable **V**ector **G**raphics - _SVG images can be scaled in size without loss of quality_. – Danny '365CSI' Engelman Jan 19 '23 at 13:49
  • Robert means that if you have added a JPG/PNG image in your illustration, it will (obviously) look bad when scaled. If not, your assumption is correct; the icons can be scaled to any size, and I (the developer) would prefer to get only one file. – Sphinxxx Jan 19 '23 at 15:44
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image – Robert Longson Jan 19 '23 at 15:57
  • Great, thanks all for the confirmation! – thepixellator Jan 19 '23 at 17:28

1 Answers1

0

My answer is "it depends".

Much like optical sizes for fonts, even though SVG is by its nature scalable, doesn't mean the format makes images look good at all sizes, even when it's all vectors and no raster.

I'd just inventory what sizes are needed and test the image to see if any adjustment is necessary for certain sizes and in case provide the variants for those.

dariod
  • 269
  • 2
  • 6