vi
new
+1
Avatar
NaN @michal.plachy
485 23 12
Đã đăng vào thg 4 25, 2016 6:35 CH 9 phút đọc
3.0K

Coloring SVGs in CSS Background Images

Tôi thích sử dụng SVG trong Css nhưng nó thật sự khó khăn để có thể thay đổi màu theo ý muốn với css. Sau đây là một số cách để làm việc này.

SVG in CSS backgrounds

Sử dụng SVG trong css backgrounds cho phép bạn sử dụng các tính năng tuyệt vời của css như chỉnh kích thước và vị trí của các thành phần. Nó giúp cho việc thay đổi kích thước của SVG đơn giản hơn bởi hình ảnh dễ dàng thay đổi kích thước thuộc tính.

Ngoài ra nó còn giúp nâng cao hiệu năng của inline SVG. Một SVG trong một hình ảnh nền có thể được cached lại. Sử dụng hình ảnh và nhúng SVG như một dữ liệu URI có thể giúp nâng cao hiệu năng.

CSS masks Đây là hàm yêu thích của tôi, nhưng trình duyệt của bạn có thể cần phải nâng cấp để dùng nó. Với mỗi thuộc tính được tạo ra thì sẽ được áp dụng cho một phần tử. Ở khắp mọi nơi mask có thể làm mờ, rõ ràng hoặc ở dưới một hình ảnh được hiển thị. Cú pháp của CSS mask-image tương tự với background-image.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Ở đây tôi sử dụng SVG như là một mask. Lấp đầy khoảng trống của icon trong SVG không thật sự quan trọng bởi vì nó đánh dấu lớp nền bằng màu đỏ. Từ đó kết quả hiển thị ra là icon màu đỏ. Với webkit tôi sử dụng prefix.

Nền của bạn có thể là màu sắc, hình ảnh hoặc có thể là bất kỳ cái gì.

<div class="wrap">
    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div><br/>

    <div class="icon icon-gradient"></div>
    <div class="icon icon-kitten"></div>
    <div class="icon icon-animation"></div>
  </div>
</div>

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;

  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }
.icon-green { background-color: green; }
.icon-blue { background-color: blue; }
.icon-indigo { background-color: indigo; }
.icon-violet { background-color: violet; }

.icon-cyan { background-color: cyan; }
.icon-magenta { background-color: magenta; }
.icon-lime { background-color: lime; }
.icon-olive { background-color: olive; }
.icon-maroon { background-color: maroon; }
.icon-purple { background-color: purple; }

.icon-white { background: white; }
.icon-gray10 { background: #e5e5e5; }
.icon-gray20 { background: #ccc; }
.icon-gray30 { background: #b2b2b2; }
.icon-gray40 { background: #999; }
.icon-gray50 { background: #7f7f7f; }
.icon-gray60 { background: #666; }
.icon-gray70 { background: #4c4c4c; }
.icon-gray80 { background: #333; }
.icon-gray90 { background: #191919; }
.icon-black { background: black; }

.icon-gradient {
  background: -webkit-radial-gradient(50% 50%, red, white);
  background: radial-gradient(50% 50%, red, white);
}

.icon-kitten {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/grumpy.jpeg) 50% 0%;
  background-size: cover;
}

.icon-animation {
  background: red;
  -webkit-animation: ❤ 6.66s infinite linear;
  animation: ❤ 6.66s infinite linear;
}

@-webkit-keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

@keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

/* LAYOUT */
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

Có hàng loạt các thuộc tính liên quan đến mask, như mask-position, mask-repeat, và mask-size, nó điều chỉnh các thuộc tính css. Bạn có thể dùng cách viết tắt mask nhưn với background:

.icon {
    background-color: red;
    -webkit-mask:  url(icon.svg) no-repeat 50% 50%;
    mask: url(icon.svg) no-repeat 50% 50%;
}

Masks được hỗ trợ ở hầu hết các trình duyệt.

http://status.modern.ie/masks http://caniuse.com/#feat=css-masks

CSS filters

Bạn có thể áp dụng Photoshop-like hiệu ứng tới DOM elements với CSS filters. Filters có thể bị trói buộc, với mỗi filter hoạt động trên các kết quả của trước đó.

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewbox="0 0 24 24">
    <path fill="red" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
</svg>

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

Ở ví dụ này, icon có màu đỏ được đặt bằng SVG. hue-rotate filter xoay hue 220 độ quanh vòng màu sắc. Nó làm icon thành màu xanh. Thuật toán của hue-rotation không thật sự chính xác, nên màu sắc đưa ra là màu xanh cơ bản có thể bị khác biệt đi đôi chút. Một cách để sửa và đẩy màu mạnh lên là thêm một bộ lọc saturation. Trong ví dụ, Tôi thêm một giá trị tùy tiện lớn từ năm chữ số thành chuỗi, làm tăng độ bão hòa bởi 500%.

Bằng cách kết nối các bộ lọc với nhau, bạn có thể làm cho rất nhiều icon màu từ một đầu vào biểu tượng màu. Với sự kết hợp khác nhau của màu sắc xoay, Invert, độ sáng, độ bão hòa và các bộ lọc, tôi đã tạo ra quang phổ cầu vồng ROYGBIV và một số màu sắc cơ bản khác như xanh da trời và màu đỏ tươi.

<div class="wrap">

    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div>

</div>

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  background-size: cover;
}

.icon-red {}

.icon-orange {
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

.icon-green{
  -webkit-filter: hue-rotate(120deg) saturate(1.5);
  filter: hue-rotate(120deg) saturate(1.5);
}

.icon-blue {
  -webkit-filter: hue-rotate(240deg) saturate(100);
  filter: hue-rotate(240deg) saturate(5);
}

.icon-indigo {
  -webkit-filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%);
  filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%)
}

.icon-violet {
  -webkit-filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
  filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
}

.icon-cyan {
  filter: invert(1);
  -webkit-filter: invert(1);
}

.icon-magenta {
  -webkit-filter: hue-rotate(260deg) saturate(100);
  filter: hue-rotate(260deg) saturate(100);

}

.icon-lime {
  -webkit-filter: hue-rotate(80deg) saturate(100);
  filter: hue-rotate(80deg) saturate(100);
}

.icon-olive {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
}

.icon-maroon {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
}

.icon-purple {
  filter: hue-rotate(300deg) saturate(.64);
  -webkit-filter: hue-rotate(300deg) saturate(.64);
}

.icon-white {
  -webkit-filter: grayscale(100%) brightness(5);
  filter: grayscale(100%) brightness(5);
}

.icon-gray10 {
  -webkit-filter: grayscale(100%) brightness(5) brightness(.9);
  filter: grayscale(100%) brightness(5) brightness(.9);
}

.icon-gray20 {
  -webkit-filter: grayscale(100%) brightness(5) brightness(80%);
  filter: grayscale(100%) brightness(5) brightness(80%);
}

.icon-gray30 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(70%);
  filter: grayscale(100%) brightness(500%) brightness(70%);
}

.icon-gray40 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(60%);
  filter: grayscale(100%) brightness(500%) brightness(60%);
}

.icon-gray50 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(50%);
  filter: grayscale(100%) brightness(500%) brightness(50%);
}

.icon-gray60 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(40%);
  filter: grayscale(100%) brightness(500%) brightness(40%);
}

.icon-gray70 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(30%);
  filter: grayscale(100%) brightness(500%) brightness(30%);
}

.icon-gray80 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(20%);
  filter: grayscale(100%) brightness(500%) brightness(20%);
}

.icon-gray90 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(10%);
  filter: grayscale(100%) brightness(500%) brightness(10%);
}

.icon-black {
  -webkit-filter: grayscale(100%) brightness(-5);
  filter: grayscale(100%) brightness(-5);
}

/* LAYOUT */
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  background-size: cover;
}

.icon-red {}

.icon-orange {
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

.icon-green{
  -webkit-filter: hue-rotate(120deg) saturate(1.5);
  filter: hue-rotate(120deg) saturate(1.5);
}

.icon-blue {
  -webkit-filter: hue-rotate(240deg) saturate(100);
  filter: hue-rotate(240deg) saturate(5);
}

.icon-indigo {
  -webkit-filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%);
  filter: hue-rotate(276deg) saturate(0.1) saturate(6.25) brightness(73%)
}

.icon-violet {
  -webkit-filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
  filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
}

.icon-cyan {
  filter: invert(1);
  -webkit-filter: invert(1);
}

.icon-magenta {
  -webkit-filter: hue-rotate(260deg) saturate(100);
  filter: hue-rotate(260deg) saturate(100);

}

.icon-lime {
  -webkit-filter: hue-rotate(80deg) saturate(100);
  filter: hue-rotate(80deg) saturate(100);
}

.icon-olive {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(630%) saturate(100) brightness(50%);
}

.icon-maroon {
  -webkit-filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
  filter: hue-rotate(35deg) saturate(.5) brightness(288%) saturate(100) brightness(50%);
}

.icon-purple {
  filter: hue-rotate(300deg) saturate(.64);
  -webkit-filter: hue-rotate(300deg) saturate(.64);
}

.icon-white {
  -webkit-filter: grayscale(100%) brightness(5);
  filter: grayscale(100%) brightness(5);
}

.icon-gray10 {
  -webkit-filter: grayscale(100%) brightness(5) brightness(.9);
  filter: grayscale(100%) brightness(5) brightness(.9);
}

.icon-gray20 {
  -webkit-filter: grayscale(100%) brightness(5) brightness(80%);
  filter: grayscale(100%) brightness(5) brightness(80%);
}

.icon-gray30 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(70%);
  filter: grayscale(100%) brightness(500%) brightness(70%);
}

.icon-gray40 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(60%);
  filter: grayscale(100%) brightness(500%) brightness(60%);
}

.icon-gray50 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(50%);
  filter: grayscale(100%) brightness(500%) brightness(50%);
}

.icon-gray60 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(40%);
  filter: grayscale(100%) brightness(500%) brightness(40%);
}

.icon-gray70 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(30%);
  filter: grayscale(100%) brightness(500%) brightness(30%);
}

.icon-gray80 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(20%);
  filter: grayscale(100%) brightness(500%) brightness(20%);
}

.icon-gray90 {
  -webkit-filter: grayscale(100%) brightness(500%) brightness(10%);
  filter: grayscale(100%) brightness(500%) brightness(10%);
}

.icon-black {
  -webkit-filter: grayscale(100%) brightness(-5);
  filter: grayscale(100%) brightness(-5);
}

/* LAYOUT */
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

Tạo một bộ màu xám của bộ lọc là khá dễ dàng. Bạn có thêm một bộ lọc màu xám và điều chỉnh bộ lọc sáng với lượng màu xám mà bạn cần.

Kỹ thuật này không phải là siêu trực quan. Nó có thể sẽ yêu cầu một số lần thử và sai để tìm thấy những màu sắc bạn cần, đặc biệt là kể từ khi các thuật toán là không hoàn hảo. Trong tương lai, nó sẽ là tuyệt vời nếu bộ lọc CSS cũng có thể làm việc trong không gian HSI, vì chúng sẽ được trực quan hơn nhiều.

bộ lọc CSS được hỗ trợ tốt trong hầu hết các trình duyệt. IE đã cho chúng được liệt kê là "trong giai đoạn phát triển", có nghĩa là họ đang được phát triển tích cực và cần được bổ sung sớm vào IE.

https://status.modern.ie/filters http://caniuse.com/#feat=css-filters

Data URI

As Chris Coyier demonstrated in his article, Probably Don't Base-64 SVG, properly formatted, you can pop SVG XML right into your CSS. Using this technique, and a bit of Sass magic, I've created some functions that allow you to dynamically change the color.

Như Chris Coyier chứng minh trong bài báo của mình, Có lẽ đừng dùng base-64 SVG, định dạng chuẩn, bạn có thể bật XML SVG ngay vào CSS của bạn. Sử dụng kỹ thuật này, và một chút của Sass kỳ diệu, tôi đã tạo ra một số chức năng cho phép bạn tự động thay đổi màu sắc.

<div class="wrap">
    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div><br>

    <div class="icon icon-stroke"></div>
    <div class="icon icon-stroke-color"></div>
    <div class="icon icon-dashstroke"></div>
    <div class="icon icon-star"></div>

</div>


@function _buildIcon($icon) {
  $icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%3E#{$icon}%3C%2Fsvg%3E';
  @return $icon;
}

@function _buildPath($path, $parameters) {
  $icon: '%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20stroke%3D%22#{map-get($parameters, stroke-color)}%22%20stroke-width%3D%22#{map-get($parameters, stroke-width)}%22%20style%3D%22#{map-get($parameters, css)}%22%20d%3D%22#{$path}%22%20%2F%3E';
  @return $icon;
}

@function icon(
  $icon-name,
  $color,
  $stroke-color: transparent,
  $stroke-width: 0,
  $css: '' // arbitrary css
  ){
    $parameters: (
      'color': $color,
      'stroke-color': $stroke-color,
      'stroke-width': $stroke-width,
      'css': $css
    );

    $icons: (
      heart: _buildPath('M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z', $parameters),
      star: _buildPath('M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z', $parameters)
    );

    $icon: _buildIcon(map-get($icons, $icon-name));
    @return url("data:image/svg+xml;charset=utf8,#{$icon}");
  }

.icon {
  width: 48px;
  height: 48px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart-sprite.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}

.icon-red    { background-image: icon(heart, red); }
.icon-orange { background-image: icon(heart, orange); }
.icon-yellow { background-image: icon(heart, yellow) }
.icon-green  { background-image: icon(heart, green) }
.icon-blue   { background-image: icon(heart, blue) }
.icon-indigo { background-image: icon(heart, indigo) }
.icon-violet { background-image: icon(heart, violet) }

.icon-cyan    { background-image: icon(heart, cyan); }
.icon-magenta { background-image: icon(heart, magenta); }
.icon-lime    { background-image: icon(heart, lime); }
.icon-olive   { background-image: icon(heart, olive); }
.icon-maroon  { background-image: icon(heart, maroon); }
.icon-purple  { background-image: icon(heart, purple); }

.icon-white  { background-image: icon(heart, white); }
.icon-gray10 { background-image: icon(heart, 'rgb(230, 230, 230)'); }
.icon-gray20 { background-image: icon(heart, 'rgb(204, 204, 204)'); }
.icon-gray30 { background-image: icon(heart, 'rgb(179, 179, 179)'); }
.icon-gray40 { background-image: icon(heart, 'rgb(153, 153, 153))'); }
.icon-gray50 { background-image: icon(heart, 'rgb(127, 127, 127)'); }
.icon-gray60 { background-image: icon(heart, 'rgb(102, 102, 102)'); }
.icon-gray70 { background-image: icon(heart, 'rgb(76, 76, 76)'); }
.icon-gray80 { background-image: icon(heart, 'rgb(51, 51, 51)'); }
.icon-gray90 { background-image: icon(heart, 'rgb(25, 25, 25)'); }
.icon-black  { background-image: icon(heart, black); }

.icon-stroke       { background-image: icon(heart, transparent, red, 2); }
.icon-stroke-color { background-image: icon(heart, red, black, 2); }
.icon-dashstroke   { background-image: icon(heart, red, black, 2, 'stroke-dasharray : 2px, 1px;'); }
.icon-star         { background-image: icon(star, blue); }

// LAYOUT
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

Với thiết lập này, thêm đường dẫn phối của SVG của bạn đến một bản đồ Sass với một 'key' và gọi hàm với các tham số của bạn. Bạn gọi hàm với tên của biểu tượng, tương ứng trong bản đồ. Bạn có thể truyền biến cho màu sắc, stroke-color, và stroke-width. Bạn cũng có thể làm công cụ thú vị khác như truyền bất kỳ SVG hợp lệ CSS, như tôi đã làm với các stroke-dasharray trong ví dụ trước.

Với mã hóa URL thích hợp, điều này sẽ làm việc trong IE. Rõ ràng là nó khá phức tạp để có thể làm được.

Probably Don't Base-64 SVG Optimizing SVGs in data URIs by Taylor Hunt

SVG Background Sprite

Tạo sprites cho SVG sử dụng các khái niệm tương tự như các nhóm hình ảnh bình thường. Sprite chứa tất cả các phiên bản của một hình ảnh. Bằng cách thao tác background-size và background-position trong CSS của bạn, bạn chọn phiên bản nào để hiển thị. Dưới đây là làm thế nào để thiết lập một SVG sprite:

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24"
height="576">
  <defs>
    <symbol id="heart">
      <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
    </symbol>
  </defs>
  <use xlink:href="#heart" x="0" y="0"   fill="red" />
  <use xlink:href="#heart" x="0" y="24"  fill="orange" />
  <use xlink:href="#heart" x="0" y="48"  fill="yellow" />
  <use xlink:href="#heart" x="0" y="72"  fill="green" />
  <use xlink:href="#heart" x="0" y="96"  fill="blue"  />
  <use xlink:href="#heart" x="0" y="120" fill="indigo" />
  <use xlink:href="#heart" x="0" y="144" fill="violet"  />
  <use xlink:href="#heart" x="0" y="168" fill="cyan" />
  <use xlink:href="#heart" x="0" y="192" fill="magenta"  />
  <use xlink:href="#heart" x="0" y="216" fill="lime" />
  <use xlink:href="#heart" x="0" y="240" fill="olive" />
  <use xlink:href="#heart" x="0" y="264" fill="maroon" />
  <use xlink:href="#heart" x="0" y="288" fill="purple" />
  <use xlink:href="#heart" x="0" y="312" fill="#fff" />
  <use xlink:href="#heart" x="0" y="336" fill="#e5e5e5" />
  <use xlink:href="#heart" x="0" y="360" fill="#ccc" />
  <use xlink:href="#heart" x="0" y="384" fill="#b2b2b2" />
  <use xlink:href="#heart" x="0" y="408" fill="#999" />
  <use xlink:href="#heart" x="0" y="432" fill="#7f7f7f" />
  <use xlink:href="#heart" x="0" y="456" fill="#666" />
  <use xlink:href="#heart" x="0" y="480" fill="#4c4c4c" />
  <use xlink:href="#heart" x="0" y="504" fill="#333" />
  <use xlink:href="#heart" x="0" y="528" fill="#191919" />
  <use xlink:href="#heart" x="0" y="552" fill="#000" />
</svg>

Sử dụng các thuộc tính xmlns namespace hoặc SVG sẽ không làm việc trong background của bạn. Cũng bao gồm các xmlns: thuộc tính XLink nếu sử dụng liên kết, cái mà tôi sử dụng trong các thẻ. Chiều rộng và chiều cao cần phải đủ lớn để chứa tất cả các hình ảnh. Trong ví dụ tôi đang sử dụng 24 biểu tượng 24x24 xếp chồng lên nhau theo chiều dọc, vì vậy kích thước SVG của tôi là 24x576 (24 lần 24 = 576).

Tôi đang sử dụng các symbol và sử dụng tags để giữ cho kích thước tập tin thấp. Xác định hình dạng biểu tượng như là một biểu tượng và đặt nó trong một khối defs. Cung cấp cho nó một id. Sử dụng các thẻ sử dụng để chèn lên các phiên bản trước của biểu tượng này. Trong thẻ use, y phối hợp được điều chỉnh để các biểu tượng chồng lên nhau khác ở 24 gia số đơn vị. Thuộc tính đầy màu sắc biểu tượng. Dưới đây là một bản demo với một loạt các biểu tượng màu khác nhau được xác định bằng kỹ thuật này.

<div class="wrap">
    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div>
</div>

.icon {
  width: 48px;
  height: 48px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart-sprite.svg) no-repeat;
  background-size: cover;
  display: inline-block;
}

$i: 100%/23; // Number of Icons minus 1

.icon-red    { background-position: 50% 0; }
.icon-orange { background-position: 50% $i * 1; }
.icon-yellow { background-position: 50% $i * 2; }
.icon-green  { background-position: 50% $i * 3; }
.icon-blue   { background-position: 50% $i * 4; }
.icon-indigo { background-position: 50% $i * 5; }
.icon-violet { background-position: 50% $i * 6; }

.icon-cyan    { background-position: 50% $i * 7; }
.icon-magenta { background-position: 50% $i * 8; }
.icon-lime    { background-position: 50% $i * 9; }
.icon-olive   { background-position: 50% $i * 10; }
.icon-maroon  { background-position: 50% $i * 11; }
.icon-purple  { background-position: 50% $i * 12; }

.icon-white  { background-position: 50% $i * 13; }
.icon-gray10 { background-position: 50% $i * 14; }
.icon-gray20 { background-position: 50% $i * 15; }
.icon-gray30 { background-position: 50% $i * 16; }
.icon-gray40 { background-position: 50% $i * 17; }
.icon-gray50 { background-position: 50% $i * 18; }
.icon-gray60 { background-position: 50% $i * 19; }
.icon-gray70 { background-position: 50% $i * 20; }
.icon-gray80 { background-position: 50% $i * 21; }
.icon-gray90 { background-position: 50% $i * 22; }
.icon-black  { background-position: 50% $i * 23; }

// LAYOUT
html, body { height: 100%; }

body {
  background: #fcfcfc;
  margin: 0;
}

.wrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

Tôi đang sử dụng Sass ở đây để làm cho thay đổi vị trí background dễ dàng hơn.

Kỹ thuật này hoạt động tuyệt vời ở khắp mọi nơi SVG được hỗ trợ. Bởi vì bạn cần phải tự tạo ra và thêm phiên bản biểu tượng mới vào sprite, nó khá linh hoạt.

Đó là những phương pháp tôi có thể nghĩ ra để nhuộm màu một SVG như một background-image với CSS. Có nhiều hơn không? Có lẽ!

CSS svg

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí