Gå til innhold

SVG inni eit XHTML dokument?

siDDis

Av siDDis
i Programmering og webutvikling

Anbefalte innlegg

siDDis

siDDis

Skrevet
Skrevet

Eg har tenkt å integrere litt meir fancy tekst enn det CSS greier idag.

Ved å bruke SVG så kan eg lett få fet tekst.

 

Men den einaste måten eg veit om for å få SVG inni eit XHTML dokument er 

<object type="image/svg+xml" data="images/topic.svg"
       	width="500" height="20">
</object>

Som fungerer fint.

 

Putter eg inn feks dette

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  version="1.0"
  width="500"
  height="20"
  id="svg2">
 <defs
    id="defs4" />
 <g
    id="layer1">
   <text
      x="4.2016807"
      y="14.957983"
      style="font-size:12px;font-style:normal;font-weight:normal;line-height:150%;opacity:1;fill:#ffa12e;fill-opacity:1;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;font-family:Bitstream Vera Sans"
      id="text1880"
      xml:space="preserve"><tspan
        x="4.2016807"
        y="14.957983"
        style="font-size:16px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:150%;writing-mode:lr-tb;text-anchor:start;fill:#ffa12e;fill-opacity:1;stroke:black;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;font-family:Arial"
        id="tspan1882">Hello World!</tspan></text>
 </g>
</svg>

Så blir teksten bare svart utan farge og stroke :(

 

Det som er fordel om eg kan bruke tekst er at det gjer det enkelt å kunne manipulere Hello World til den teksten eg vil ha. Sånn som det fungerer nå så må eg lage ein SVG fil for kvar tekst :(

 

Nokon her som har erfaring med å inkludere SVG kode rett inn i eit XHTML dokument eller som har ein ide over korleis eg kan få det til?

Videoannonse

Videoannonse
Annonse
Vindstille

Vindstille

Skrevet
Skrevet (endret)

Funker fint for meg med dette her (i Opera og Firefox):

 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />

<title>Test av SVG</title>

</head>

<body>

<p>Test</p>

<svg

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.0"

width="500"

height="20"

id="svg2">

<defs

id="defs4" />

<g

id="layer1">

<text

x="4.2016807"

y="14.957983"

style="font-size:12px;font-style:normal;font-weight:normal;line-height:150%;opacity:1;fill:#ffa12e;fill-opacity:1;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;font-family:Bitstream Vera Sans"

id="text1880"

xml:space="preserve"><tspan

x="4.2016807"

y="14.957983"

style="font-size:16px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:150%;writing-mode:lr-tb;text-anchor:start;fill:#ffa12e;fill-opacity:1;stroke:black;stroke-linecap:butt;stroke-linejoin:bevel;stroke-opacity:1;font-family:Arial"

id="tspan1882">Hello World!</tspan></text>

 

</g>

</svg>

</body>

 

 

Husk at IE ikke støtter SVG og at teksten ikke er lesbar for søkemotorer. Dessuten vil brukere som prøver å oversette teksten med oversettelsesprogrammer ikke få oversatt SVG-teksten. Så løsningen er absolutt ikke å anbefale vis du skal bruke det på en offentliggjort webside.

 

Trudde egentlig siden måtte sendes med application/xhtml+xml for at SVG ol. inni XHTML skal vises, men det ser ut som det alikevel funker i Opera og Firefox.

Endret av JonT
  • 2 måneder senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...