SVG som bakgrundsbild på webbsida

JeyPeyy · Inlägg av **JeyPeyy** » 08 maj 2009, 22:39

Jag går kursen webbdesign A där jag nu ska göra en egen sida. Man ska försöka få med så mycket som möjligt; html (ganska självklart), flash, javascript, css osv. Jag frågade om jag fick tänja lite på gränserna och ha med lite SVG-filer. Han sa att det var kul om man pushade på utvecklingen av svg lite, så han accepterade det.

Nu har jag gjort en bild i inkscape som jag vill ha som bakgrundsbild. I main.css har jag skrivit såhär:

body{
background-image: url('drawing.svg');
background-repeat: no-repeat;
}

Detta funkade inte i Firefox, men däremot i Opera. Jag vet att firefox har delvis stöd för svg, men det här funkade visst inte.

Jag har två frågor:
1) Finns det ett annat sätt jag kan göra det på som fungerar i firefox?
2) Kan jag göra så att storleken på bilden beror på fönstrets storlek?

Konservburk · Inlägg av **Konservburk** » 09 maj 2009, 07:28

JeyPeyy skrev:Detta funkade inte i Firefox, men däremot i Opera. Jag vet att firefox har delvis stöd för svg, men det här funkade visst inte.

Det finns en buggrapport om att just den biten inte fungerar:
https://bugzilla.mozilla.org/show_bug.cgi?id=231179

JeyPeyy skrev:Jag har två frågor:
1) Finns det ett annat sätt jag kan göra det på som fungerar i firefox?
2) Kan jag göra så att storleken på bilden beror på fönstrets storlek?

Du kan inkludera din svg-bild som vanligt och sedan använda css för att placera den i bakgrunden och låta den täcka hela renderingsytan...

test.svg:

Kod: Markera allt

<svg xmlns="http://www.w3.org/2000/svg">
<title>test.svg</title>
<linearGradient id="gradient">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="red" offset="100%" />
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
<circle cx="50%" cy="50%" r="30%" fill="url(#gradient)" />
</svg>

test.html:

Kod: Markera allt

<html>
<head>
<title>test.html</title>
</head>
<body>
<div>
    <object
        data="test.svg"
        type="image/svg+xml"
        style="
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;">
    </object>
    hejsan
</div>
</body>
</html>

Om du använder xhtml istället för vanlig html så kan du dessutom stoppa in svg-koden direkt i din xhtml-kod. Det ger dig nya intressanta möjligheter, som t.ex. att kunna sätta svg-bildens färger från en separat css-fil...

test.css:

Kod: Markera allt

#background-image
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#gradient-begin
{
    stop-color: yellow;
}
#gradient-end
{
    stop-color: red;
}

test.xhtml:

Kod: Markera allt

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test.xhtml</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div>
    <svg id="background-image" xmlns="http://www.w3.org/2000/svg">
        <linearGradient id="gradient">
            <stop id="gradient-begin" offset="0" />
            <stop id="gradient-end" offset="100%" />
        </linearGradient>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
        <circle cx="50%" cy="50%" r="30%" fill="url(#gradient)" />
    </svg>
    hejsan
</div>
</body>
</html>

Jag vet inte om ni har tagit upp xhtml, men det är i princip samma sak som html, förutom att du måste ha med xmlns="http://www.w3.org/1999/xhtml" i html-taggen och du måste tala om när det inte kommer någon sluttagg genom att stänga oparade taggar med /> istället för bara >.

JeyPeyy · Inlägg av **JeyPeyy** » 10 maj 2009, 10:52

Konservburk skrev:
JeyPeyy skrev:Jag har två frågor: mycket
1) Finns det ett annat sätt jag kan göra det på som fungerar i firefox?
2) Kan jag göra så att storleken på bilden beror på fönstrets storlek?
Du kan inkludera din svg-bild som vanligt och sedan använda css för att placera den i bakgrunden och låta den täcka hela renderingsytan...

test.svg:
Kod: Markera allt
<svg xmlns="http://www.w3.org/2000/svg">
<title>test.svg</title>
<linearGradient id="gradient">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="red" offset="100%" />
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
<circle cx="50%" cy="50%" r="30%" fill="url(#gradient)" />
</svg>
test.html:
Kod: Markera allt
<html>
<head>
<title>test.html</title>
</head>
<body>
<div>
    <object
        data="test.svg"
        type="image/svg+xml"
        style="
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;">
    </object>
    hejsan
</div>
</body>
</html>

Tack! Jag testade det och gjorde några förändringar. Jag märkte även att jag samtidigt kunde lägga till en bakgrundsbild i css-filen, vilket gör det här ganska så snyggt. Jag har inte gjort färdigt textdelen (vilket ni antagligen ser).

: Min Hemsida.png (105.24 KiB) Visad 1480 gånger

Tyvärr så lyckades jag inte få min bild att anpassas till fönstrets storlek. Antagligen måste jag ändra i svg-filen, vilket är ganska svårt när man gjort bilden i inkscape, men det blev ju faktiskt rätt snyggt ändå.

Konservburk skrev: Om du använder xhtml istället för vanlig html så kan du dessutom stoppa in svg-koden direkt i din xhtml-kod. Det ger dig nya intressanta möjligheter, som t.ex. att kunna sätta svg-bildens färger från en separat css-fil...

test.css:
Kod: Markera allt
#background-image
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#gradient-begin
{
    stop-color: yellow;
}
#gradient-end
{
    stop-color: red;
}
test.xhtml:
Kod: Markera allt
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test.xhtml</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div>
    <svg id="background-image" xmlns="http://www.w3.org/2000/svg">
        <linearGradient id="gradient">
            <stop id="gradient-begin" offset="0" />
            <stop id="gradient-end" offset="100%" />
        </linearGradient>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
        <circle cx="50%" cy="50%" r="30%" fill="url(#gradient)" />
    </svg>
    hejsan
</div>
</body>
</html>
Jag vet inte om ni har tagit upp xhtml, men det är i princip samma sak som html, förutom att du måste ha med xmlns="http://www.w3.org/1999/xhtml" i html-taggen och du måste tala om när det inte kommer någon sluttagg genom att stänga oparade taggar med /> istället för bara >.

Jo, vi har tagit upp xhtml, men det verkar inte som om han tycker att det är speciellt viktigt att använda xhtml. Om man använder W3C's validator märker man att han har 91 fel på sin sida om man väljer xhtml strict.

Konservburk · Inlägg av **Konservburk** » 10 maj 2009, 11:30

JeyPeyy skrev:Tyvärr så lyckades jag inte få min bild att anpassas till fönstrets storlek. Antagligen måste jag ändra i svg-filen, vilket är ganska svårt när man gjort bilden i inkscape, men det blev ju faktiskt rätt snyggt ändå.

Det bör ju gå att ställa in i inkscape kan man tycka. Om inte annat så ska det inte vara speciellt svårt att gå in och ändra i svg-filen för hand, även om den är gjord i inkscape. En lämplig viewBox i svg-taggen skulle förmodligen göra susen. Jag är lite nyfiken på hur pass komplicerat det kan bli. Om du inte har något emot att dela med dig av din svg-bild så tar jag mig gärna en titt på koden.

JeyPeyy skrev:Jo, vi har tagit upp xhtml, men det verkar inte som om han tycker att det är speciellt viktigt att använda xhtml. Om man använder W3C's validator märker man att han har 91 fel på sin sida om man väljer xhtml strict.

Den sidan går ju inte ens igenom en vanlig simpel html-validering. Men man kan nog inte förvänta sig mer av någon som gör ett såpass grundläggande fel som att förlita sig helt på flash. En webbdesignlärare borde veta bättre.

JeyPeyy · Inlägg av **JeyPeyy** » 10 maj 2009, 13:21

Konservburk skrev:Om du inte har något emot att dela med dig av din svg-bild så tar jag mig gärna en titt på koden.

Absolut inte.

Kod: Markera allt

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.46"
   sodipodi:docname="drawing.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient3303">
      <stop
         style="stop-color:#ff0000;stop-opacity:1;"
         offset="0"
         id="stop3305" />
      <stop
         style="stop-color:#ffff00;stop-opacity:1;"
         offset="1"
         id="stop3307" />
    </linearGradient>
    <linearGradient
       id="linearGradient3159">
      <stop
         style="stop-color:#ffff00;stop-opacity:1;"
         offset="0"
         id="stop3161" />
      <stop
         style="stop-color:#00ffff;stop-opacity:0;"
         offset="1"
         id="stop3163" />
    </linearGradient>
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       id="perspective10" />
    <radialGradient
       inkscape:collect="always"
       xlink:href="#linearGradient3159"
       id="radialGradient3165"
       cx="94.519379"
       cy="224.14699"
       fx="94.519379"
       fy="224.14699"
       r="214.13751"
       gradientTransform="matrix(1,0,0,1.0393026,0,-8.8095538)"
       gradientUnits="userSpaceOnUse" />
    <radialGradient
       inkscape:collect="always"
       xlink:href="#linearGradient3303"
       id="radialGradient3311"
       cx="101.29843"
       cy="217.27612"
       fx="101.29843"
       fy="217.27612"
       r="540.32977"
       gradientTransform="matrix(1,0,0,1.0445027,0,-9.6693843)"
       gradientUnits="userSpaceOnUse" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     gridtolerance="10000"
     guidetolerance="10"
     objecttolerance="10"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="585.17824"
     inkscape:cy="615.88439"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="822"
     inkscape:window-height="786"
     inkscape:window-x="135"
     inkscape:window-y="271" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="star"
       style="opacity:1;fill:url(#radialGradient3311);fill-opacity:1;fill-rule:nonzero;stroke:#0000ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="path2383"
       sodipodi:sides="5"
       sodipodi:cx="154.28571"
       sodipodi:cy="220.93361"
       sodipodi:r1="526.11353"
       sodipodi:r2="196.98779"
       sodipodi:arg1="0.6334659"
       sodipodi:arg2="1.246628"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 578.32308,532.36217 L 217.03036,407.66148 L -10.865706,720.45383 L -3.9138889,338.30941 L -371.82085,218.22552 L -6.231679,106.74797 L -5.7146156,-280.2603 L 213.2801,32.987202 L 581.50662,-86.113176 L 351.26363,218.96198 L 578.32308,532.36217 z"
       transform="matrix(1.0437571,0,0,1.0362369,134.99315,163.7052)" />
    <path
       sodipodi:type="star"
       style="opacity:1;fill:url(#radialGradient3165);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="path2385"
       sodipodi:sides="5"
       sodipodi:cx="114.28571"
       sodipodi:cy="226.6479"
       sodipodi:r1="232.04503"
       sodipodi:r2="95.072807"
       sodipodi:arg1="0.66320299"
       sodipodi:arg2="1.2915215"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 297.14285,369.50504 L 140.49335,318.03717 L 34.926464,444.70066 L 35.467961,279.81369 L -117.61814,218.55478 L 39.366022,168.1169 L 50.3205,3.5933209 L 146.80055,137.30797 L 306.65689,96.885714 L 209.30068,229.96379 L 297.14285,369.50504 z"
       transform="matrix(0.9621876,0.2723878,-0.2723878,0.9621876,233.20035,139.87248)" />
    <path
       sodipodi:type="star"
       style="opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="path2387"
       sodipodi:sides="5"
       sodipodi:cx="117.14286"
       sodipodi:cy="238.07648"
       sodipodi:r1="48.655392"
       sodipodi:r2="19.934942"
       sodipodi:arg1="0.78539816"
       sodipodi:arg2="1.4137167"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 151.54742,272.48103 L 120.26137,257.76599 L 95.053775,281.42875 L 99.380697,247.12675 L 69.086497,230.4651 L 103.04673,223.98034 L 109.53148,190.02011 L 126.19313,220.31431 L 160.49513,215.98739 L 136.83237,241.19499 L 151.54742,272.48103 z"
       transform="matrix(0.8031115,0.5958288,-0.5958288,0.8031115,334.48096,126.58719)" />
  </g>
</svg>

Konservburk skrev:Den sidan går ju inte ens igenom en vanlig simpel html-validering. Men man kan nog inte förvänta sig mer av någon som gör ett såpass grundläggande fel som att förlita sig helt på flash. En webbdesignlärare borde veta bättre.

Håller med dig fullständigt. Han är riktigt kass som webbdesignlärare. T.ex. använder han frames på i sina sidor, vilket är helt värdelöst. Anledningen till att jag inte gillar frames är bl.a. på grund av att det blir konstigt när man sparar bokmärken. Usch säger jag bara

Konservburk · Inlägg av **Konservburk** » 10 maj 2009, 14:41

Det där var faktiskt lättare fixat än vad jag först befarade.

I svg-taggen finns width och height:

Kod: Markera allt

width="744.09448819"
height="1052.3622047"

Byt helt enkelt ut dessa mot en viewBox:

Kod: Markera allt

viewBox="0 0 744.09448819 1052.3622047"

Använd exakt samma värden som i width och height.

Sedan gäller det att bestämma sig för hur bredd/höjd-förhållandet ska hanteras om webbläsarens renderingsyta inte stämmer överens med svg-bilden. Detta stryr du med preserveAspectRatio. Om du vill att bilden alltid ska sträckas ut i båda riktingarna så använder du värdet none:

Kod: Markera allt

preserveAspectRatio="none"

Om du istället vill bevara bredd/höjdförhållandet så finns det ett antal olika sätt. Du kan t.ex. se till så att hela bilden alltid får plats och fylla ut resten av ytan med tomrum som du kan välja om det ska ligga till höger eller till vänster eller hälften på varje sida och ovanför eller nedanför eller hälften på varje sida. Detta fyller ut med tomrum nedanför och till höger:

Kod: Markera allt

preserveAspectRatio="xMinYMin meet"

Istället för tomrum kan du välja att hugga av den del av bilden som inte får plats. Du kan välja att hugga till vänster, till höger eller hälften på varje sida och ovanför eller nedanför eller hälften av varje. Detta placerar bilden i mitten och hugger av det som inte får plats på sidorna:

Kod: Markera allt

preserveAspectRatio="xMidYMid slice"

Det hela går såklart att kombinera lite hur du vill. Här är en beskrivande bild som förhoppningsvis förtydligar hur det fungerar:

Bild

Jag har knappt använt inkscape något, men jag förmodar att både viewBox och preserveAspectRatio går att komma åt innifrån progammet.

JeyPeyy skrev:
Konservburk skrev:Den sidan går ju inte ens igenom en vanlig simpel html-validering. Men man kan nog inte förvänta sig mer av någon som gör ett såpass grundläggande fel som att förlita sig helt på flash. En webbdesignlärare borde veta bättre.
Håller med dig fullständigt. Han är riktigt kass som webbdesignlärare. T.ex. använder han frames på i sina sidor, vilket är helt värdelöst. Anledningen till att jag inte gillar frames är bl.a. på grund av att det blir konstigt när man sparar bokmärken. Usch säger jag bara

En webbdesignlärare bör vara medveten om att tillgängligheten är A och O när det gäller webdesign. Det finns faktiskt minoriteter som t.ex. synskadede att ta hänsyn till. Även mobilsurfare och liknande stängs ofta ute på grund av ren tanklöshet.

* En usel webbdesigner struntar helt i tillgängligheten och är bara intresserad av utseendet.
* En dålig webbdesigner tummar ibland på tillgängligheten för att få saker att se ut som han vill.
* En bra webbdesigner tummar alltid hellre på utseendet än på tillgängligheten.
* En proffsig webbdesigner behöver varken tumma på utseendet eller tillgängligheten.

JeyPeyy · Inlägg av **JeyPeyy** » 10 maj 2009, 16:05

Tack så otroligt mycket! Du tar verkligen din tid att visa och förklara vilket jag uppskattar mycket! xMinYMin meet var det jag ville ha, men det är även väldigt bra att du förklarar meet och slice så att jag lär mig någonting.

Konservburk skrev:En webbdesignlärare bör vara medveten om att tillgängligheten är A och O när det gäller webdesign. Det finns faktiskt minoriteter som t.ex. synskadede att ta hänsyn till. Även mobilsurfare och liknande stängs ofta ute på grund av ren tanklöshet.

* En usel webbdesigner struntar helt i tillgängligheten och är bara intresserad av utseendet.
* En dålig webbdesigner tummar ibland på tillgängligheten för att få saker att se ut som han vill.
* En bra webbdesigner tummar alltid hellre på utseendet än på tillgängligheten.
* En proffsig webbdesigner behöver varken tumma på utseendet eller tillgängligheten.

Vad kallar man då en weebdesigner som struntar helt i tillgängligheten och är bara intresserad av utseendet, men som misslyckas men att göra den snygg?

Rune.K · Inlägg av **Rune.K** » 10 maj 2009, 16:13

JeyPeyy skrev: Vad kallar man då en weebdesigner som struntar helt i tillgängligheten och är bara intresserad av utseendet, men som misslyckas men att göra den snygg?

Oduglig...
Dessutom lär det vara ett väldigt fåtal som tittar på en sådan "weebdesigner" 's webbsida mer än en gång...

Ubuntu Sverige

SVG som bakgrundsbild på webbsida

SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida

Re: SVG som bakgrundsbild på webbsida