Johdatus HTML SVG: hen
Kuvien käyttäminen HTML-muodossa on mahtavaa multimediarikkaille verkkosivustoille. Ainoa mitä sinun täytyy tehdä, on lisätä tunniste HTML-koodiin ja alttoviuluun, selaimesi näyttää ja lisää jopa linkin valitsemaasi kuvaan. Se on hieman huolestuttava tilanteissa, joissa tiedät, että kuvaa tai kaaviota zoomataan, koska JPG.webp tai PNG eivät näytä mitään yksityiskohtaisempia tietoja, kun niitä on zoomattu tarkkuuden yli. SVG on ratkaisu tähän ongelmaan. SVG tarkoittaa skaalautuvaa vektorigrafiikkaa. Kuten nimestä voi päätellä, niitä voidaan zoomata niin paljon kuin tarvitaan ja yksityiskohdat eivät koskaan katoa. SVG-tiedostot eivät ole yksinomaan verkkoteknologiaa, mutta niiden käyttäminen HTML-muodossa on todella siistiä.
SVG on hyödyllinen kaavioissa, vektoreissa, kaavioissa ja graafissa selaimessa. Otetaan täältä, kuinka voit käyttää niitä yksityiskohtaisesti.
SVG: n upottamisen syntaksi HTML-muodossa
Samoin kuin kankaan käyttö HTML5: ssä, on yksinkertainen tunniste, jonka avulla voit upottaa SVG: tä HTML5-sivuille. Syntaksi on seuraava:
…. …. …. ….
Esimerkkejä HTML: n SVG-tiedostoista
Katsotaanpa nyt joitain esimerkkejä vektoreista, jotka voidaan luoda ja upottaa HTML5: ään:
Esimerkki 1 - suorakulmion piirtäminen SVG: n avulla HTML-muodossa
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 2 - Pyöristettyjen kulmien neliön piirtäminen SVG-muodossa
Pyöristetyillä kulmilla varustetun neliön kohdalla kulmien säde on määritettävä käyttämällä rx, ry, neliön koon ja mittojen lisäksi.
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 3 - Piirrä ympyrä SVG: ssä ääriviivat ja värivaihtoehdot sen sisälle
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 4 - Suoran viivan piirtäminen SVG: llä HTML5: ssä
Tunnisteella voidaan piirtää suora viiva HTML5 SVG-tiedostoihin, myös väri, viivan paksuus ja sen sijainti voidaan määritellä.
Koodi:
lähtö:
Esimerkki 5 - Pimennyspiirtäminen SVG: n kautta HTML5: ssä
Tunnisteella voidaan piirtää pimennys HTML5 SVG -sovelluksiin, myös sen väri ja sijainti voidaan määrittää kuoleman mukana sen säteen kanssa.
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 6 - Monikulmion luominen SVG: n avulla HTML5: ssä
Tunnistetta voidaan käyttää SVG: ssä monikulmioiden luomiseen. Tunnisteessa meidän on mainittava kunkin pisteen sijainti. Täyttövärit, ääriviivojen paksuus jne. Voidaan määritellä myös koodissa.
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 7 - Polylinin luominen SVG: llä HTML5: ssä
Polylinea käytetään piirtämään muoto, joka koostuu vain suorasta linjasta. Muista, että myös nämä johdot on kytkettävä. Tässä on esimerkki polyline-toteutuksesta HTML5: ssä.
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 8 - Tekstin piirtäminen SVG: llä HTML5: ssä
Teksti voi olla tarpeen missä tahansa SVG: ssä monissa tilanteissa, kuten kaavion merkitseminen jne. SVG: ssä onneksi on olemassa tunniste, jota voidaan käyttää. Teksti voidaan asettaa mihin tahansa kohtaan SVG: ssä, ja voit myös mukauttaa sen väriä ja muita yksityiskohtia.
Koodi:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 9 - Tähden piirtäminen SVG: llä HTML5: ssä
Nyt kun olemme perustaneet perusasiat, luodaan tähti, joka tehdään SVG: n avulla.
Koodi:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
lähtö:
Esimerkki 10 - Lineaarigradientin käyttäminen SVG: ssä
Voit käyttää lineaarista ja radiaalista gradienttia SVG-rivin HTML-kankaassa. Kaltevuus on sijoitettava tagiin. Tämän jälkeen tämä tunniste merkitään SVG-tunnisteessa sen käytön osoittamiseksi. Katsotaanpa esimerkkiä, joka käyttää Gradientia pimennyksessä.
Koodi:
Sorry but this browser does not support inline SVG.
lähtö:
johtopäätös
Sivustoissa, joissa on käytettävä kaavioita ja kaavioita, SVG-arvot ovat hengenpelastaja. Useimmat nykyaikaiset selaimet tukevat myös SVG: tä ja ovat skaalautuvat. Toinen hyöty SVG: n käytöstä on sen tiedostokoko. Koska kyse on vain vähän koodista, SVG-tiedostojen muistissa ja kaistanleveydessä voi olla hyvin pieni jalanjälki verrattuna perinteisiin kuviin.
Suositellut artikkelit
Tämä on opas HTML SVG: hen. Tässä keskustellaan HTML SVG: n johdannosta ja 10 parhaasta esimerkistä selityksineen ja koodin toteutuksella. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- Html5 uudet elementit
- SVG vs. EPS
- HTML-esteet
- HTML-kehykset