Category: SVG

A Practical Guide to SVG on the Web

To keep your SVGs as small as possible you want to remove anything unnecessary. The most well known and best (at least I think so) tool to post process SVGs is SVGO. This strips out all the code that isnt’t needed — but remember to be careful when using this if you plan to manipulate with CSS / JS as it will also strip out any layer names etc you have added. The best thing with SVGO is it can be added to your build process so it is automatic (or you can use a GUI to do it yourself).

guide-to-svgs-on-web

source

CSS hue-rotate: Why doesn’t hue rotation by +180deg and -180deg yield the original color?

Scroll down for answer 2. CSS filter: hue-rotate(XXdeg) gives unexpected results. This seems to be why –

Question:

By reading HSL/HSV color theory, I get the impression that hue component is a cyclical attribute that repeats every 360 degrees and can be changed independently of saturation and lightness/value. Correct me if I am wrong, but these statements logically follow the previous definition:

  • Rotating hue by 360 degrees yields the same color
  • Rotating hue by 180 degrees twice yields the original color
  • Rotating hue by 180 degrees followed by -180 degrees yields the original color
  • However, only the option 1 is correct. Rotating hue 4 times by +90 degrees yields a color that isn’t even remotely similar to the original.

Furthermore, using -webkit-filter and SVG’s 

don’t produce the same result for the same rotation. On the other hand, colors produced by SVG filters are consistent across browsers.

Is there any “hidden” property of hue rotation that makes the operation not associative?

Examples of both webkit filters and SVGs can be found here: http://jsfiddle.net/maros_urbanec/ARsjb/5/

Answer:

In both CSS and SVG filters, there is no conversion into HSV or HSL – the hueRotation shorthands are using a linear matrix approximation in RGB space to perform the hue rotation. This doesn’t conserve saturation or brightness very well for small rotations and highly saturated colors – as you’re seeing.

A true hue rotation, would first convert the input RGB color to HSL, adjust the H and then convert back to RGB. Filters don’t do this. And this conversion can’t be accurately approximated with a linear matrix, so while the hue is accurately changed(mostly), the saturation and brightness goes all over the place. These effects are non-linear, so adding smaller ops together results in different colors vs. doing one big operation.

(The difference between huerotation in SVG and CSS filters could be due to using different color spaces (sRGB vs. linearRGB) – these should be the same.)

Update: I got interested enough to go and do a manual comparison. As you can see, filters do a terrible job of hue rotating pure colors in the 0 to 180 degree range. This image compares a manual hue rotation done by plugging in hsl colors manually (outer ring) vs. a filter hue rotation on the base color (inner ring)

hue-css-rotate-bright

But, they do a better job at less pure colors like hsl(0,50%,75%) as you can see.

hue-css-rotate-faded

source

Tips For Optimising SVG Delivery For The Web

  1. Enable Gzip on your SVGs (if it’s not already enabled)
  2. Avoid multiple requests when providing fallback with
  3. Avoid Embedding SVGs as Data URIs when possible
  4. Don’t base64 inline SVGs
  5. a cacheable SVG sprite
  6. Optimise Your SVG
  7. Test, test, test

    8. source

    Styling And Animating SVGs With CSS

    CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements.

    • SVG graphics are scalable and resolution-independent. They look great everywhere, from high-resolution “Retina” screens to printed media.
    • SVGs have very good browser support. Fallbacks for non-supporting browsers are easy to implement, too, as we’ll see later in the article.
    • Because SVGs are basically text, they can be Gzip’d, making the files smaller that their bitmap counterparts (JPEG and PNG).
    • SVGs are interactive and styleable with CSS and JavaScript.
    • SVG comes with built-in graphics effects such as clipping and masking operations, background blend modes, and filters. This is basically the equivalent of having Photoshop photo-editing capabilities right in the browser.
    • SVGs are accessible. In one sense, they have a very accessible DOM API, which makes them a perfect tool for infographics and data visualizations and which gives them an advantage over HTML5 Canvas because the content of the latter is not accessible. In another sense, you can inspect each and every element in an SVG using your favorite browser’s developer tools, just like you can inspect HTML elements. And SVGs are accessible to screen readers if you make them so. We’ll go over accessibility a little more in the last section of this article.
    • Several tools are available for creating, editing and optimizing SVGs. And other tools make it easier to work with SVGs and save a lot of time in our workflows. We’ll go over some of these tools next.

    source

    Advanced SVG, CSS, JavaScript Techniques – Smashing Magazine Newsletter

    It’s quite remarkable how far we’ve come in front-end over the past few years. What seemed to be quite difficult in the past, can now be solved so easily today (think about responsive image maps, for example). Every other day, there are new techniques that come up — shared and explained publicly — and that is amazing.

    Advanced SVG, CSS, JavaScript Techniques

    So what about Masking SVG animations using clip-path? Or perhaps using background-clip for transparent borders? Or perhaps cross-browser custom-styled select menus, creating CSS hexagons with transform and calc()? using smart radio buttons? Just a few techniques for your toolbox to have nice, scalable, and fast solutions ready for your next project. Handy! (vf)

    Google Material Design icons

    Today, Google Design are open-sourcing 750 glyphs as part of the Material Design system icons pack. The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. They’re equally useful when building for the web, Android or iOS.

    What’s included in the release?

    • SVG versions of all icons in both 24px and 48px flavours
    • SVG and CSS sprites of all icons
    • 1x, 2x icons targeted at the Web (PNG)
    • 1x, 2x, 3x icons targeted at iOS (PNG)
    • Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

    material design icons

    source

    SVG Clever Tips And Tricks – Smashing Magazine Newsletter

    There is so much you can do with SVG to make your website scalable and flexible, and it’s impressive to see new techniques emerging almost every single week. Have you considered masking SVG animations and using clip-path (yes, that clip-path) to make the animations a bit more smooth? Did you know that you can modify the fill color just like you can do with icon fonts? What about Flexible SVG text, SVG clipping, including JavaScript in SVG and other smart SVG techniques?

    SVG Clever Tips And Tricks

    There are many practical applications that focus on SVG, and with the support starting from IE8 and Android 4.3, it’s becoming pretty universal everywhere. What have you been able to create with SVG? Let us know via #smashingSVG and we’ll feature your project in the next newsletter issue! (vf)