Created by: thekondrashov
Replace PNG with SVG
Preview (scale 500%) | |
---|---|
before / before (pixelated) / after |
Compress SVGs
Well compressed with SVGO, but I'm sure it is possible to compress more:
- form-icon-success
- form-icon-warning
- form-icon-error
- input:checked icon
(re)drawn by me (with maximum compression, is impossible to compress better
- c-select
- input:indeterminate icon
- input:checked icon
What do you think about this hack?
input:checked ~ .c-indicator {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle fill='%23fff' r='3'/%3E%3C/svg%3E");
}
Looks dirty, but still smaller. Read more: https://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris