Kiel Meti SVG-Grafikaĵojn en Via Retpaĝo

SVG aŭ Scalable Vector Graphics permesas vin desegni multe pli kompleksajn bildojn kaj havi ilin senditaj sur retpaĝoj. Sed vi ne povas simple preni la SVG-etikedojn kaj frapi ilin en vian HTML. Ili ne montriĝos kaj via paĝo estos nevalida. Anstataŭe, vi devas uzi unu el tri metodoj.

Uzu la Objekto-tagon por enigi SVG

La HTML-etikedo enmetos SVG-grafikon en via retpaĝo. Vi skribas la objektan etikedon kun atributo de datumoj por difini la SVG-dosieron, kiun vi volas malfermi. Vi ankaŭ devus inkluzivi larĝajn kaj altajn atributojn por difini la larĝon kaj altecon de via SVG-bildo (en pikseloj).

Por kongruo de transversa retumilo, vi devas inkluzivi la tipan atributon, kiu devus legi:

tipo = "bildo / svg + xml"

kaj kodonbase por foliumiloj, kiuj ne subtenas ĝin (Interreto Explorer 8 kaj pli malalta). Via kodo-kalkulo aperus SVG-kromaĵon por retumiloj, kiuj ne subtenas SVG. La plej komune uzita kromaĵo estas de Adobe ĉe http://www.adobe.com/svg/viewer/install/. Tamen, ĉi kromaĵo jam ne estas subtenata de Adobe. Alia eblo estas la Ssrc SVG-kromaĵo de Savarese Software Research ĉe http://www.savarese.com/software/svgplugin/.

Via celo aspektus tiel:

Konsiletoj por Uzado de objekto por SVG

  • Certigu, ke la larĝo kaj alteco estas almenaŭ tiom grandaj kiel la bildo, kiun vi enigas. Alie, via bildo povus esti fermita.
  • Via SVG eble ne montriĝus ĝuste se vi ne inkluzivas la ĝustan enhavan tipon (type = "image / svg + xml"), do mi ne rekomendas lasi ĝin.
  • Vi povas inkluzivigi retaran informon ene de la objekto etikedo por retumiloj, kiuj ne montros SVG-dosierojn.
  • Vi povas ankaŭ agordi la fonton de via SVG kaj la enhavo-tipo en parametroj. Ĉi tio eble funkcios pli bone en IE 6 kaj 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Notu, ke ĉi tio postulas klasidon fari ĝin funkcii.

Vidi SVG en objekta ekzemplo.

Embed SVG kun la Embed Tag

Alia eblo, kiun vi havas por inkludi SVG, estas uzi la etikedon. Vi uzas preskaŭ la samajn atributojn kiel la objekto-etikedo, inkluzive de larĝa <, alteco, tipo, kaj codebase>. La sola diferenco estas, ke anstataŭ datumoj, vi metas vian SVG-dokumenton URL en la atributa src.

Via embed aspektus tiel:

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

Konsiletoj por Uzado Embed por SVG

  • La enmeta etikedo ne estas valida HTML4, sed ĝi estas valida HTML5, do se vi uzas ĝin en HTML4-paĝo, vi devas memori, ke via paĝo ne validos.
  • Uzi plene restarigitan domajnan nomon en la src-atributo por plej bona kongruo.
  • Ankaŭ estas iuj raportoj, kiuj uzas la enkorpigitan etikedon kun la Adobe-kromaĵo frakasos la versiojn de Mozilla 1.0 ĝis 1.4.

Vidi SVG en enmeta etikedo ekzemplo.

Uzu iframe por Inkludi SVG

Iframes estas alia facila maniero por inkluzivi SVG-bildon sur viaj retpaĝoj. Ĝi nur postulas tri atributojn: larĝeco kaj alteco kiel kutime, kaj src montrante la lokon de via SVG-dosiero.

Via iframe aspektus tiel: