SVG HTML-sivulla

SVG-tiedosto voidaan sisällyttää HTML-dokumenttiin seuraavilla taggeilla: <embed>, <object> tai <iframe>.

SVG HTML-sivulla

Seuraavaksi näet kolme erilaista tapaa sisällyttää SVG-tiedosto HTML-sivulle.

Käytä <embed> -tagia

<embed> -tagi tukee kaikkia suosittuja selaimia ja mahdollistaa skriptien käytön.

Huomautus:Kun SVG-tiedosto sisällytetään HTML-sivulle, suositellaan käyttämään <embed> -tagia Adobe SVG Viewer -ohjelmassa! Jos kuitenkin haluat luoda laillista XHTML:ää, et voi käyttää <embed> -tagia. Mikään HTML-standardi ei sisällä <embed> -tagia.

Syntaksi:

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

Huomautus:pluginspage-ominaisuus osoittaa URL:n, josta voit ladata lisäosan.

Käytä <object> -tagia

<object> -tagi on HTML 4:n standarditagi, jota kaikki uudet selaimet tukevat. Sen haittapuoli on, että sitä ei voi käyttää skriptejä varten.

Huomautus:Jos olet asentanut uusimman versionin Adobe SVG Viewer -ohjelmaa, SVG-tiedostot eivät toimi <object> -tagin avulla (ainakaan Internet Explorerissä)!

Syntaksi:

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

Huomautus:codebase-ominaisuus osoittaa plug-inin lataus-URL:hen.

Käytä <iframe>-tagia

<iframe>-tagi toimii suurimmassa osassa selaimia.

Syntaksi:

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

Odotan...

Jos voit vain viitata SVG:n nimeäspaceen, jotta voit lisätä SVG-elementtejä HTML-koodiin, se olisi erittäin hyvä asia, ja se näyttää tältä:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Tämä on HTML-paragraphi</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>