HTML Tricks, Labs

SVG En İyi Kullanım Yöntemi

Merhaba, SVG, vektör grafikleri için bir görüntü formatıdır. Kelimenin tam anlamıyla Scalable Vector Graphics yani Ölçeklenebilir Vektör Grafikleri anlamına gelir. Temel olarak, Adobe Illustrator’da çalıştığınız şey. SVG’yi web’de oldukça kolay […]

yzr: Hakkı Cengiz
A+ A A- okuma

Merhaba,
SVG, vektör grafikleri için bir görüntü formatıdır. Kelimenin tam anlamıyla Scalable Vector Graphics yani Ölçeklenebilir Vektör Grafikleri anlamına gelir. Temel olarak, Adobe Illustrator'da çalıştığınız şey. SVG'yi web'de oldukça kolay bir şekilde kullanabilirsiniz, ancak bilmeniz gereken çok şey var.

Neden SVG kullanıyoruz?

  • İyi sıkıştıran küçük dosya boyutları
  • Netliği kaybetmeden her boyuta ölçeklenebilmesi (çok küçük olanlar hariç)
  • Retina ekranlarda harika görünüyor
  • Etkileşim ve filtreler gibi tasarım kontrolü

CSSTricks'te Chris Coyier abimizin saydığı bu sebeplere ek olarak bence en güzel olayı resmin bir kod parçasına dönüşmesi. Bir url'den çağırmıyorsun, o resmi de taşımak zorunda kalmıyorsun. Kendi ikon kütüphaneni oluşturabiliyorsun.

Bugün sizlere SVG kullanımında kullandığım bir kolaylığı göstereceğim. Normalde svg alırız, kopyalar ve direk kodlarımıza atarız ama bu kodlarımız arasında dağ gibi satırlar oluşturur ve de haliyle daha fazla scroll kaydırır dururuz kodlarken. İşte bunun önüne geçen kullanımı sizlere anlatacağım.

  • Normal Kullanım

    
    ...
    </head>
    <body>
    ..
        <!-- Load More Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.333 341.333" fill="currentColor">
    
            <path d="M341.227 149.333V0l-50.133 50.133C260.267 19.2 217.707 0 170.56 0 76.267 0 .107 76.373.107 170.667s76.16 170.667 170.453 170.667c79.467 0 146.027-54.4 164.907-128h-44.373c-17.6 49.707-64.747 85.333-120.533 85.333-70.72 0-128-57.28-128-128s57.28-128 128-128c35.307 0 66.987 14.72 90.133 37.867l-68.8 68.8h149.333z" />
        </svg>
        <!-- Load More Icon -->
    
      <!-- User Icon -->
      <svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" id="icon-user">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M19 20C19 20.552 18.553 21 18 21C17.447 21 17 20.552 17 20C17 17.243 14.757 15 12 15C9.243 15 7 17.243 7 20C7 20.552 6.553 21 6 21C5.447 21 5 20.552 5 20C5 16.14 8.141 13 12 13C15.859 13 19 16.14 19 20ZM12 5C13.103 5 14 5.897 14 7C14 8.103 13.103 9 12 9C10.897 9 10 8.103 10 7C10 5.897 10.897 5 12 5ZM12 11C14.206 11 16 9.206 16 7C16 4.794 14.206 3 12 3C9.794 3 8 4.794 8 7C8 9.206 9.794 11 12 11Z" fill="currentcolor"/>
      </svg>
      <!-- User Icon -->
    ..
    </body>
    
  • Kolay Kullanım

    Burada SVG'den gelen uzun kodları SVG etiketi altında sayfanın herhangi yerine ekliyoruz, saklıyoruz.

    
    ...
    </head>
    <body>
    ..
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" style="display: none;">
    
     <!-- Load More Icon -->
        <symbol id="icon-loadmore" viewBox="0 0 341.333 341.333" >
            <path d="M341.227 149.333V0l-50.133 50.133C260.267 19.2 217.707 0 170.56 0 76.267 0 .107 76.373.107 170.667s76.16 170.667 170.453 170.667c79.467 0 146.027-54.4 164.907-128h-44.373c-17.6 49.707-64.747 85.333-120.533 85.333-70.72 0-128-57.28-128-128s57.28-128 128-128c35.307 0 66.987 14.72 90.133 37.867l-68.8 68.8h149.333z" />
        </symbol >
    
    
      <!-- User Icon -->
      <symbol id="icon-user" viewBox="0 0 24 24">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M19 20C19 20.552 18.553 21 18 21C17.447 21 17 20.552 17 20C17 17.243 14.757 15 12 15C9.243 15 7 17.243 7 20C7 20.552 6.553 21 6 21C5.447 21 5 20.552 5 20C5 16.14 8.141 13 12 13C15.859 13 19 16.14 19 20ZM12 5C13.103 5 14 5.897 14 7C14 8.103 13.103 9 12 9C10.897 9 10 8.103 10 7C10 5.897 10.897 5 12 5ZM12 11C14.206 11 16 9.206 16 7C16 4.794 14.206 3 12 3C9.794 3 8 4.794 8 7C8 9.206 9.794 11 12 11Z" fill="currentcolor"/>
      </symbol>
    
    
    </svg>
    ..
    </body>
    
  • Nasıl çağırırız?

    
        <!-- Nasıl kullanırız? 
            <svg class="icon">
                <use xlink:href="#icon-logo" />
            </svg>
        -->
    

 

superpeer iş alımı başvurum

Örnek

 

 

Kaynak | Google'da bu yöntemi kullanarak svg dosyalarını kütüphane oluşturup kullanıyor. Bkz. Google Trends

1 Yorumları: - Yorum Formunu: -

    […] Yine ikinci versiyon halini de buraya bırakıyorum. Click eventleri kontrol etmek ve de hazırladığımız SVG Kütüphanemize eklemek istediğimiz farzederek (bkz. SVG En İyi Kullanım Yöntemi). […]

    1 ay önce - SVG Filling Turkish Tea Animation #dailycode #cayarasi ~ Hakkı Cengiz %

Bi yoruma ne dersin ?

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir