CSS-Tricks
SVG Artboard Sizing
There are a couple of different (rational) approaches to SVG artboard sizing.
The term "Artboard" here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful system.
I recently met developer Emma Arce at a conference who relayed a very interesting conversation between her team as they were attempting to standardize on something and get this right. Here's my take on the situation.
Approach #1: Make them all the exact same size
You'll probably be applying sizing through CSS, so size of the artboard doesn't matter much, but the dimensions should be identical. Here's what that looks like:
Advantages
Relative sizing. You control right in the design of the icon itself how it is sized compared to other icons. So if you size them all the same in CSS later, all the icons will maintain that size relationship and look good together.
Disadvantages
Directional alignment. Since there is an arbitrary amount of whitespace on any given side of any given icon, it's hard to align things to the edge of an icon or expect a consistent amount of space between an icon and adjacent element.
Approach #2: Crop to edges
Again the actual "size" of the artboard doesn't matter since you'll likely be applying sizing through CSS anyway, but the artboard should meet the edge of the artwork on all sides. In Illustrator, it's an easy move:
Here's what that looks like:
Advantages
Alignment and positioning. If you want to position an icon in the upper right corner of an element, it's going to go there and look nice and aligned. There won't be some weird arbitrary amount of whitespace to compensate for.
Disadvantages
Sizing inconsistency. All the icons have different aspect ratios now. That's not a huge problem for complexity, because you can still size them with CSS with a fixed width/height and they will center within that area (assuming a default preserveAspectRatio). But, that will affect their sizing. The closer any given icons aspect ratio is to a square, the bigger it will seem (it will fill the space given). Taller or wider icons will need to shrink to fit in the space and appear smaller. So consistant and other-icon-relative sizing is harder.
Winner?
I'm afraid I just can't pick one. I really like the positioning consistency of cropped icons, but the inconsistent sizing can drive me nuts. And I'm sure it would work exactly the opposite if I changed.
Other Considerations
Consistency through boxes: If in every single instance of using SVG you are placing the icon within a visually-defined box, alignment becomes a non-issue since you can align the boxes and they will look fine.
You can always do one-offs: Let's say you have one really long and skinny arrow shape. You can always do some special CSS just for that one. I wouldn't change a whole system based on a handful of outliers. This is about the system as a whole.
SVG Artboard Sizing is a post from CSS-Tricks
Keine Kommentare:
Kommentar veröffentlichen