Web sayfanıza SVG Grafikleri Nasıl Eklenir?

SVG veya Ölçeklenebilir Vektör Grafikleri çok daha karmaşık görüntüler çizmenizi ve web sayfalarında oluşturmanızı sağlar. Ancak SVG etiketlerini alıp HTML'nize atamazsınız. Görünmeyecekler ve sayfanız geçersiz olacak. Bunun yerine, üç yöntemden birini kullanmanız gerekir.

Embed SVG için Object Tag kullanın

HTML etiketi, web sayfanızda bir SVG grafiği yerleştirecektir. Açmak istediğiniz SVG dosyasını tanımlamak için nesne etiketini bir veri niteliğiyle yazarsınız. Ayrıca SVG resminizin genişliğini ve yüksekliğini (piksel olarak) tanımlamak için width ve height niteliklerini de eklemelisiniz.

Tarayıcılar arası uyumluluk için, okuması gereken tür özelliğini eklemelisiniz:

type = "image / svg + xml"

ve bunu desteklemeyen tarayıcılar için bir kod tabanı (Internet Explorer 8 ve daha düşük). Kod tablonuz, SVG'yi desteklemeyen tarayıcılar için SVG eklentisine işaret eder. En yaygın kullanılan eklenti Adobe’den http://www.adobe.com/svg/viewer/install/ adresindedir. Ancak, bu eklenti artık Adobe tarafından desteklenmemektedir. Başka bir seçenek de http://www.savarese.com/software/svgplugin/ adresindeki Savarese Software Research'ten Ssrc SVG eklentisidir.

Nesneniz şöyle görünecekti:

SVG için nesne kullanma ipuçları

  • Genişlik ve yüksekliğin, en az gömdüğünüz resim kadar büyük olduğundan emin olun. Aksi takdirde, resminiz kırpılmış olabilir.
  • Doğru içerik türünü (type = "image / svg + xml") eklemediyseniz, SVG'niz doğru görüntülenmeyebilir, bu yüzden onu bırakmamanızı öneririz.
  • SVG dosyalarını göstermeyen tarayıcılar için nesne etiketinin içine geri dönüş bilgileri ekleyebilirsiniz.
  • Ayrıca SVG'nizin kaynağını ve içerik türünü parametreler olarak da ayarlayabilirsiniz. Bu IE 6 ve 7'de daha iyi çalışabilir:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" genişlik = "110" yükseklik = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Bunun işe yaraması için bir sınıf gerektirdiğini unutmayın.

Bir nesne etiketi örneğinde bir SVG'yi görüntüleyin.

Embed Tag ile SVG göm

SVG'yi dahil ettiğiniz başka bir seçenek de etiketi kullanmaktır. Width <, height, type ve codebase> gibi nesne etiketiyle neredeyse aynı nitelikleri kullanırsınız. Tek fark, veri yerine SVG doküman URL'nizi src özelliğine yerleştirmenizdir.

Gömüntünüz şöyle görünürdü:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

SVG için Embed Kullanılmasına İlişkin İpuçları

  • Yerleştirme etiketi geçerli bir HTML4 değil, ancak geçerli bir HTML5'dir. Bu nedenle, bir HTML4 sayfasında kullanırsanız, sayfanızın doğrulanmayacağını unutmayın.
  • En iyi uyumluluk için src özniteliğinde tam bir quoalified etki alanı adı kullanın.
  • Adobe eklentisiyle yerleştirme etiketini kullanmanın Mozilla sürüm 1.0 ile 1.4 arasında kilitleneceği yönünde bazı raporlar da vardır.

Gömülü etiket örneğinde bir SVG'yi görüntüleyin.

SVG'yi Dahil Etmek için bir iframe kullanın

Iframe'ler , web sayfalarınıza bir SVG resmi eklemenin bir başka kolay yoludur. Sadece üç özellik gerektirir: her zamanki gibi genişlik ve yükseklik ve SVG dosyanızın konumunu gösteren src.

Iframe'niz şöyle görünürdü: