HTML sayfasındaki SVG

SVG dosyaları HTML belgesine aşağıdaki etiketlerle eklenebilir: <embed>, <object> veya <iframe>.

HTML sayfasındaki SVG

Aşağıda, SVG dosyalarını HTML sayfasına ekleme yöntemlerinin üç farklı şekilde göreceksiniz.

<embed> etiketi kullanarak

<embed> etiketi tüm popüler tarayıcılar tarafından desteklenir ve betik kullanımına izin verir.

Açıklama:HTML sayfasına SVG eklerken <embed> etiketi Adobe SVG Viewer tarafından tavsiye edilen yöntemdir! Ancak, geçerli bir XHTML oluşturmak için <embed> kullanılamaz. Hiçbir HTML standartında <embed> etiketi yoktur.

Sözdizimi:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Açıklama:pluginspage özelliği, eklentinin indirileceği URL'ye yönlendirir.

<object> etiketi kullanarak

<object> etiketi HTML 4'nin standart etiketidir ve tüm yeni tarayıcılar tarafından desteklenir. Dezavantajı, betik kullanımına izin vermemesidir.

Açıklama:Eğer en yeni sürümü olan Adobe SVG Viewer'ı kurduysanız, <object> etiketi ile SVG dosyaları çalışmaz (en azından IE'de çalışmaz)!

Sözdizimi:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Açıklama:codebase özelliği, eklentinin indirileceği URL'ye işaret eder.

<iframe> etiketi kullanımı

<iframe> etiketi çoğu tarayıcıda çalışır.

Sözdizimi:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Beklediğim...

SVG'nin adlandırma alanını referans alarak SVG elementlerini HTML koduna eklemek o kadar harika olurdu ki, şöyle bir şey gibi:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black">
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>