![]() ![]() I wouldn’t change a whole system based on a handful of outliers. You can always do some special CSS just for that one. You can always do one-offs: Let’s say you have one really long and skinny arrow shape. Other ConsiderationsĬonsistency 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. And I’m sure it would work exactly the opposite if I changed. I really like the positioning consistency of cropped icons, but the inconsistent sizing can drive me nuts. So consistant and other-icon-relative sizing is harder. Taller or wider icons will need to shrink to fit in the space and appear smaller. The closer any given icons aspect ratio is to a square, the bigger it will seem (it will fill the space given). 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). All the icons have different aspect ratios now. There won’t be some weird arbitrary amount of whitespace to compensate for. 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. In Illustrator, it’s an easy move:Īlignment and positioning. Approach #2: Crop to edgesĪgain 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. 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. So if you size them all the same in CSS later, all the icons will maintain that size relationship and look good together. You control right in the design of the icon itself how it is sized compared to other icons. 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 my take on the situation.Īpproach #1: Make them all the exact same size 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. 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. Ultimately it refers to the viewBox in the actual SVG output. ![]() The term “Artboard” here is referring to that concept in Illustrator, basically the white drawing area you have for the document. There are a couple of different (rational) approaches to SVG artboard sizing. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |