Tuesday, August 15, 2017

Memanipulasi SVG ikon dengan Simple CSS

Selamat siang menjelang siang, ada teman yang minta suruh membuat tutorial untuk membuat manipulasi SVG,  mungkin sudah banyak ya tutorial SVG namun teman-teman belum ketemu aja artikel, di sina saya akan memmbagikan cara manipulasi SVG icon dengan CSS.


Style Icon CSS

Smart ikon merupakan fitur yang banyak digunakan. Kumpulan icon gambar statis mencakup berbagai subjek yang berbeda, namun diberikan dalam gaya visual tunggal. Namun ada banyak situasi yang mana ikon tertentu harus memiliki style. Styling tidak mungkin mengunakan gambar statis (kecuali Output filesetiap estetika tertentu)


Satu Icon

Kombinasi SVG dan CSS ajaib. SVG marup mrnyediakan akses dan kontrol untuk semua elemen yang terkandung didalamnya. ini berarti ikon sinyal wifi yang menjadi menyala dangan CSS. kontras dapat ditata untuk mencerminkan yang spesifik. sebagai contoh bambar di bawah ini.

Memanipulasi SVG ikon dengan Simple CSS


Source codenya seperti ini

HTML


<img src="signal.svg" class="svg-inject iconic-signal-strong" />
<img src="signal.svg" class="svg-inject iconic-signal-medium" />
<img src="signal.svg" class="svg-inject iconic-signal-weak" />
<img src="signal.svg" class="svg-inject iconic-signal-none" />


JS

$('.svg-inject').svgInject();

CSS


/*Strong signal*/
.iconic-signal.iconic-signal-strong .iconic-signal-base {
    fill:#569e26;
}
.iconic-signal.iconic-signal-strong .iconic-signal-wave * {
    stroke:#569e26;
}

/*Medium signal*/
.iconic-signal.iconic-signal-medium .iconic-signal-base {
    fill:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave * {
    stroke:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave-outer {
    opacity:.3;
    stroke-width:.5;
}

/*Weak signal*/
.iconic-signal.iconic-signal-weak .iconic-signal-base {
    fill:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave * {
    stroke:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave-outer ,
.iconic-signal.iconic-signal-weak .iconic-signal-wave-middle {
    opacity:.3;
    stroke-width:.5;
}

/*No signal*/
.iconic-signal.iconic-signal-none .iconic-signal-base {
    fill:#848484;
}
.iconic-signal.iconic-signal-none .iconic-signal-wave * {
    stroke:#848484;
    opacity:.3;
    stroke-width:.5;
}

SVG  : signal.svg


<svg version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.26px" height="8px" viewBox="0 0 11.26 8" enable-background="new 0 0 11.26 8" xml:space="preserve">
  <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/>
  <g class="iconic-signal-wave">
    <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/>
    <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/>
    <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/>
  </g>
</svg>

Silahkan dicoba dan dikembangkan sendiri, ini hanya sebagai dasar saja. terimakasih
By di