Skip to content
GitLab

Replace PNG with SVG and compress SVGs in custom form controls

Merged Administrator requested to merge github/fork/thekondrashov/patch-1 into v4-dev

Created by: thekondrashov

Replace PNG with SVG

Preview (scale 500%)
before / before (pixelated) / after Preview Preview Preview

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