29 ms·
I love it. SVG (or any vector asset really) is probably one of the best ways to handle graphics in a responsive design. Right now, I have no particular issue w
by bbx 13y ago
I love it. SVG (or any vector asset really) is probably one of the best ways to handle graphics in a responsive design.
Right now, I have no particular issue with resizing my HTML elements with CSS using different margin/padding values. Font size is easily handled as well, considering fonts are basically vector shapes (and it's the reason why they're rendered differently across browsers). But dealing with images, especially background ones, can be irritating because they're pixel-fixed.
Another interesting vector resource is icon fonts. I recently started a project that included social icons (Facebook, Twitter, GitHub...) in theme-based profiles. Themes mean different layouts and different color palettes. Instead of generating tons of uniquely colored image sprites of various sizes for each theme, I settled for an icon font. You basically use Illustrator to generate SVGs for each social icon, and you use a tool like IcoMoon to build your own custom font. I can then easily apply a different font-size and color for each theme.
Creating vector images is still troublesome, but looking at these demos, I might try to include more SVGs in future projects.