HTML SVG - Najboljših 10 primerov HTML SVG s sintakso in kodo

Kazalo:

Anonim

Uvod v SVG HTML

Uporaba slik v HTML je super za večpredstavnostna spletna mesta. Vse, kar morate storiti, je, da dodate oznako v kodo HTML in violo, vaš brskalnik bo prikazal in celo dodal povezavo do slike po vaši izbiri. V težavah, ko veste, da se slika ali diagram povečata, se poveča, ker JPG.webp ali PNG ne bosta pokazala nobenih nadaljnjih podrobnosti, ko se povečata v svoji ločljivosti. SVG je rešitev tega problema. SVG pomeni Scalable Vector Graphics. Kot že ime pove, jih je mogoče povečati, kolikor je potrebno, in podrobnosti nikoli ne izginejo. SVG-ji niso izključno spletna tehnologija, vendar jih je mogoče uporabljati v HTML-ju resnično lepo.

SVG je uporaben za diagrame, vektorje, grafikone in grafe v brskalniku. Spoznajmo, kako jih lahko podrobno uporabite tukaj.

Sintaksa vdelave SVG v HTML

Kot je uporaba platna v HTML5, obstaja preprosta oznaka, ki jo lahko uporabite za vdelavo SVG na strani HTML5. Skladnja je naslednja:


…. …. …. ….

Primeri SVGs v HTML

Zdaj si oglejmo nekaj primerov vektorjev, ki jih je mogoče ustvariti in vdelati v HTML5:

Primer # 1 - Risanje pravokotnika prek SVG v HTML

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 2 - Risba kvadrata z zaobljenimi vogali v SVG

Za kvadrat z zaobljenimi vogali bomo morali določiti polmer vogalov z uporabo rx, ry poleg velikosti in dimenzij kvadrata.

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 3 - Narišite krog v SVG z obrisom in barvnim vložkom v njem

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 4 - Risanje ravne črte s SVG v HTML5

Z oznako lahko narišemo ravno črto v SVG-jih HTML5, določimo lahko tudi barvo, debelino črte in njen položaj.

Koda:




Izhod:

Primer # 5 - Risanje mrka prek SVG v HTML5

Z oznako lahko narišemo mrk v SVG-jih HTML5, barvo in položaj le-te lahko določimo skupaj z matrico s polmerom.

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 6 - Ustvarjanje poligona s SVG v HTML5

Oznako lahko uporabite v SVG-jih za ustvarjanje poligonov. V oznaki moramo omeniti položaje vsake točke. Barve, debelina obrisa itd. Se lahko določijo tudi v kodi.

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 7 - Ustvaritev poline z SVG v HTML5

Polilin se uporablja za risanje oblike, ki bo sestavljena samo iz ravne črte. Upoštevajte, da morajo biti tudi te vrstice povezane. Tu je primer izvajanja poline v HTML5.

Koda:




Sorry but this browser does not support inline SVG.

Izhod:

Primer # 8 - Risanje besedila s SVG v HTML5

Besedilo bi lahko bilo potrebno v katerem koli SVG v številnih situacijah, kot je na primer označevanje grafikona itd. Na srečo v SVG obstaja oznaka, ki jo je mogoče uporabiti. Besedilo lahko nastavite na kateri koli položaj v SVG in lahko prilagodite tudi njegovo barvo in druge podrobnosti.

Koda:



Here is an example, it's very examply
Sorry but this browser does not support inline SVG.

Izhod:

Primer # 9 - Risba zvezde s SVG v HTML5

Zdaj, ko smo končali z osnovami, ustvarimo zvezdo, ki bo narejena s pomočjo SVG.

Koda:



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.

Izhod:

Primer # 10 - Uporaba linearnega gradienta v SVG

Lahko uporabite linearni in radialni Gradient v velikem vrstici HTML Canvas. Gradient mora biti ugnezden v oznaki. Ta oznaka je nato označena v SVG oznaki za označevanje njene uporabe. Oglejmo si primer, ki Gradient uporablja v mrku.

Koda:







Sorry but this browser does not support inline SVG.

Izhod:

Zaključek

V primeru mest, kjer naj bi se uporabljali diagrami in grafikoni, so SVG-ji rešilci. Večina sodobnih spletnih brskalnikov podpira tudi SVG in ne more biti razširljiv. Druga prednost uporabe SVG je njegova velikost datoteke. Ker gre le za malo kode, imajo SVG-ji lahko zelo majhen odtis pomnilnika in pasovne širine v primerjavi s tradicionalnimi slikami.

Priporočeni članki

To je vodnik za HTML SVG. Tukaj razpravljamo o uvodu in najboljših 10 primerih HTML SVG z razlago in implementacijo kode. Če želite izvedeti več, si oglejte tudi naslednje članke -

  1. Html5 Novi elementi
  2. SVG proti EPS
  3. Bloki HTML
  4. Okvirji HTML