SVG ile Alakalı Her Şey

Bu notta SVG ile alakalı araştırmalar yapılmış ve alınan notlar aşağıda açıklanmıştır

SVG nedir

Scalable Vector Graphics XML tabanlı bir resim formatıdır. Diğer resim formatları (jpg, png, gif) aksine SVG pixel tabanlı değil vektör tabanlıdır. Bu sebeple düzenlenmesi ve editlenmesi(düzenlenmesi) bir hayli kolaydır. Özellikle animasyonlarda yaygın olarak kullanılması bu esnek yapısından kaynaklanır.

SVG’yi neden kullanmalıyım

• Dosya boyutu çok küçüktür
• Farklı cihaz boyutlarında da netlik kaybetmez
• Retina (Yüksek piksel yoğunluğuna sahip) ekranlarda mükemmel gözükür
• Tasarım kontrolleri oldukça kolaydır

SVG leri en uygun hale getirmek için yapılabilecek adımlar

SVG leri kullandığımızda optimize etmek için yapabileceğimiz bazı adımlar bulunuyor. Bunları yapma nedenimiz SVG boyutunu küçültmek, anlaşılabilirliğini artırmak ve web performansımızı artırmaktır.

Kullanılabilecek uygulamalar arasında açık kaynak olarak paylaşılmış svgo projesi kullanılabilir. Veya svgo-gui ile manuel olarak da yapabilirsiniz. SVG optimize işlemleri için bir çok farklı uygulama bulunuyor. Paylaşılanlar bunlardan sadece bazılarıdır.

Not: SVG iconları içindeki b tagı yerine use tagının kullanılması performansta ciddi bir artışa sebep olacaktır.

SVG’lerin implement edilme şekilleri

• Image taglarıyla import edilebilir. Picture elementi ile de import edilebilir.

    <img src="bblogo.svg" alt="Breaking Borders Logo" />

• Background Image kullanarak yapılabilir. Bu method SVG ler üzerinde değişiklik yapılmasını kısıtlayacağını unutmayalım 😉

    .logo {
      background-image: url(bblogo.svg);
    }

• Iframe aracılığıyla import edilebilir

    <iframe src="bblogo.svg">Your browser does not support iframes</iframe>

• Embed ile de eklenebilir

    <embed type="image/svg+xml" src="bblogo.svg" />

• Object ile SVG ler import edilebilir. Bu SVG leri import etmek için en sağlıklı yöntemlerden biridir.

    <object type="image/svg+xml" data="svg-ok.svg">
      <p class="no-support">
        Your browser does not support SVG!
      </p>
    </object>

Eğer SVG elementimizin yedeğini(fallback) tag içerisinde eklemek istersek;

    <svg viewBox="-20 -20 40 40">
      <!-- SVG code snipped -->
      <image src="fallback.png" xlink:href="" />
    </svg>

Fakat bu şekilde image eklememiş tarayıcı tarafında birden fazla istek atılmasına neden olacaktır. Bunu önlemek için;

    <object type=”image/svg+xml” data=”mySVG.svg”>
      <div id="fallback"></div>
    </object>

    #fallback {
      background: url(fallback.png);
      width: 15em;
      height: 12em;
      ...
    }

şeklinde bir önlem almak bu sorunun önüne geçmek için yardımcı olacaktır.

• Inline Olarak da import edilebilir. Hızlı bir şekilde SVG ler üzerinde işlem yapmak için en uygun yöntemdir. Http isteğinden kurtulacağınız için performans kazanırsınız. Fakat tarayıcılar artık SVG dosyasını ~cache~ yapamaz. Ve SVG dosyalarına html in içerisinde müdahale etmek ileride çok fazla sıkıntı doğurur.

    <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 68 65">
      <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
      <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
    </svg>

Tavsiye Edilen Kullanım Sırası

1. Object
2. Image veya Background-Image
3. Inline Olarak
4. Embed veya iframe

SVG’ye Css ile Müdahale Etme

SVG lerin bir diğer güzel özelliği ise değiştirmek istediğimiz bir özelliği kolayca uygulayabilmemiz. Örneğin bir adet kırmızı renkli icon umuz var ve biz bu iconun rengini farklı sayfalarda mavi yapmak istiyoruz. Bunun için yeni bir icon oluşturmak yerine css ile rengini düzenleyebilmemiz bizi gereksiz dosyalardan kurtarıyor.

Bunun için 2 türlü yöntemimiz var;

• Ya vericeğimiz stilleri(style/css) inline olarak element içerisinde vermek

    <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 68 65">
      <style type="text/css">
        <![CDATA[
        .firstb { fill: yellow; }
        .secondb { fill: red; }
        ]]>
      </style>
      <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
      <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
    </svg>

• External css dosyasında gerekli style’ları yazmak

    <!-- Add to very start of SVG file before <svg> -->
    <?xml-stylesheet type="text/css" href="style.css"?>

    /* In style.css */
    .firstb { fill: yellow; }
    .secondb { fill: red; }

Son Sözler 📣

SVG çoğu tarayıcı tarafından destekleniyor. Bu sebeple SVG’leri kullanırken uygulamamızın SVG tarafından bozulacağı riski bir hayli az görünüyor. Bunun için tarayıcı desteklerini inceleyebileceğiniz caniuse.com sitesine bakabilirsiniz.

Yararlanılan Kaynaklar 📚

• A Practical Guide to SVGs on the web
• The Ultimate Guide To SVG by Ezequiel Bruni
• Using SVG by Chris Coyier
• A Complete Guide to SVG Fallbacks by Amelia Bellamy-Royds

İletişim Halinde Olalım 😊

Benimle sosyal medya hesaplarım aracılığıyla iletişime geçebilirsiniz.

• Linkedin Hesabım
• Github Hesabım
• Twitter Hesabım