Hvordan bruke SVG i HTML
Scalable Vector Graphics (SVG) filer er en alternativ metode for å vise grafiske elementer i en nettleser. SVG brukes til å vise grafiske elementer som ikke mister sin kvalitet når forstørret eller endret størrelse eller vises på skjermer med ulik oppløsning. Høy kvalitet nettsted logoer, bannere og ikoner kan opprettes og vises ved hjelp av SVG-teknologi.
Bruksanvisning
Forbered testmiljø
1 Høyreklikk på skrivebordet i operativsystemet. Fra hurtigmenyen, velg "Ny mappe" eller "Opprett ny mappe" fra listen over alternativer.
2 Skriv inn navnet "SVG Test Folder" i tekstfeltet som har blitt brakt i fokus i forrige trinn.
3 Klikk på et område utenfor tekstfeltet for å lagre navnet på den nyopprettede mappen. En mappe med navnet "SVG Test mappe" er nå til stede på skrivebordet.
4 Start opprinnelige tekst editor program som følger med operativsystemet. For Windows, start "Notisblokk", og på Mac OSX, bruk "TextEdit". For Linux-distribusjoner, velge mellom enten "Gedit." "Pico", "vi" eller "Emacs."
Opprett HTML-dokument
5 Finn nytt, tomt dokument som har blitt skapt av den opprinnelige teksten redigeringsprogram. Hvis ingen har blitt opprettet automatisk, naviger til "File" og velg "Ny" eller "Nytt dokument" fra listen over alternativer som vises.
6 Klikk i teksten registreringsvinduet i det nye dokumentet.
7 Marker følgende kode (inkludert "Start her" og "End her"):
<! - Start her ->
<Html>
<head>
& Lt; title> Bruke SVG inne HTML & lt; / title>
& Lt; style>
kropp {
margin: 50 piksler 0px; padding: 0px;
text-align: center;
}
div # innhold {
width: 500px;
margin: 0px auto;
text-align: center;
padding: 15px;
border: 1px solid #ccc;
background-color: #fafafa;
}
embed # S {
margin: 10px 0px 10px 75px;
}
& Lt; / style>
& Lt; / head>
& Lt; body>
& Lt; div id = 'content'>
& Lt; h1> Bruke SVG inne HTML & lt; / h1>
& Lt; embed id = "S" og "C" samtidig for å kopiere den markerte koden til operativsystemet utklippstavle. Hvis du bruker Mac OSX, trykk "cmd" og "C" samtidig i stedet for "Ctrl" og "C" Denne alternative handlings kopierer også den merkede koden til operativsystemets utklippstavlen.
9 Klikk på "File" - ". Lagre som">
10 Naviger til skrivebordet ved hjelp av explorer vinduet i dialogboksen som vises.
11 Naviger og velg "SVG Test mappe" ved hjelp av explorer vinduet filen som inneholder en liste over filer som ligger på skrivebordet.
12 Finn "Lagre som" tekstfeltet og skriv inn "SVG.html."
1. 3 Trykk "OK" når du er ferdig. Et nytt dokument kalt "SVG.html" skal nå være plassert i "SVG Test mappe", som er på skrivebordet.
14 Kontroller at "Lagre som" dialogboksen har forsvunnet.
Lag SVG dokument
15 Klikk på den opprinnelige tekstredigeringsprogram programvinduet for å få programmet tilbake i fokus.
16 Naviger til "File". Velg "New" eller "Nytt dokument" fra listen over alternativer som vises.
17 Marker følgende kode (inkludert "Start her" og "End her"):
<! - Start her ->
<? Xml version = "1.0" standalone = "no"?>
<! DOCTYPE SVG PUBLIC "- // W3C // DTD SVG 1.1 // EN"
"Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<Svg width = "100%" height = "100%" version = "1.1"
xmlns = "http://www.w3.org/2000/svg">
<Sirkel cx = "100" cy = "50" r = "40" stroke = "black"
stroke-width = "2" fylle = "blue" />
</ Svg>
<! - End her ->
18 Trykk "Ctrl" og "C" samtidig for å kopiere den markerte koden til operativsystemet utklippstavle. Hvis du bruker Mac OSX, trykk "cmd" og "C" samtidig i stedet for "Ctrl" og "C" Denne alternative handlings kopierer også den merkede koden til operativsystemets utklippstavlen.
19 Klikk på "File" - ". Lagre som">
20 Naviger til skrivebordet ved hjelp av explorer vinduet filen i dialogboksen som vises.
21 Naviger og velg "SVG Test mappe" ved hjelp av explorer vinduet filen som inneholder en liste over filer som ligger på skrivebordet.
22 Finn "Lagre som" tekstfeltet og skriv inn "circles.svg."
23 Trykk "OK" når du er ferdig å begå reddet. Et nytt dokument kalt "circles.svg" er nå plassert i SVG Test mappe, som ligger på skrivebordet.
24 Kontroller at "Lagre som" dialogboksen har forsvunnet.
test filer
25 Minimer de to åpne dokumenter, "circles.svg" og "SVG.html", slik at skrivebordet er klart synlig.
26 Dobbeltklikk på mappen "SVG Test mappe." En ny fil explorer vinduet vises.
27 Høyreklikk på filen som heter "SVG.html" og naviger til "Open With." Velg en SVG-kompatibel nettleser fra listen over programmer som vises. Ta kontakt med "tips" i denne how-to for mer informasjon.
28 Vent til SVG kompatibel nettleser for å starte og gjengi "SVG.html." Et nytt nettleservindu.
29 Kontroller at en blå sirkel med en svart ramme vises i midten av nettleservinduet. Dette indikerer at oppgaven er fullført.
Hint
- Hvis eksempelet ikke fungerer prøve å se på 'svg.html' dokumentet i en annen nettleser. Ikke alle nettlesere er kompatible med SVG.
- Mange versjoner av den opprinnelige nettleserprogrammet som følger med operativsystemet Windows, Internet Explorer, ikke gjengi SVG. Installer en SVG-kompatibel nettleser for å fullføre dette eksemplet. Firefox, Chrome og Opera er nettlesere som gir støtte for skalerbar vektorgrafikk.
- Dobbeltsjekk at både svg.html og circle.svg filene er lagret i samme mappe - SVG Test mappe på skrivebordet.