Introducere în HTML SVG
Folosirea imaginilor în HTML este minunat pentru site-urile web bogate în multimedia. Tot ce trebuie să faceți este să adăugați o etichetă la codul HTML și viola, browserul dvs. va afișa și chiar va adăuga un link la imaginea alesă. Devine puțin tulburător în situațiile în care știi că imaginea sau diagrama vor fi mărite, deoarece un JPG.webp sau PNG nu va afișa niciun detaliu odată ce va fi marit în trecut de rezoluția sa. SVG este soluția la această problemă. SVG înseamnă grafică vectorială scalabilă. După cum sugerează și numele, acestea pot fi amplasate atât cât este necesar, iar detaliile nu dispar. SVG-urile nu sunt exclusive tehnologiei web, dar faptul că le poți folosi în HTML este într-adevăr îngrijit.
SVG este util pentru diagrame, vectori, diagrame și grafice din browser. Să aflăm despre cum le puteți folosi în detaliu aici.
Sintaxa de încorporare SVG în HTML
Similând utilizarea panzei în HTML5, există o etichetă simplă pe care o puteți utiliza pentru a încorpora SVG în paginile HTML5. Sintaxa urmează:
…. …. …. ….
Exemple de SVG-uri în HTML
Acum, să aruncăm o privire la unele vectori de exemplu care pot fi create și încorporate în HTML5:
Exemplul # 1 - Desenarea unui dreptunghi prin SVG în HTML
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 2 - Desenarea unui pătrat cu colțurile rotunjite în SVG
Pentru un pătrat cu colțuri rotunjite, va trebui să definim raza colțurilor folosind rx, în afară de dimensiunea și dimensiunile pătratului.
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 3 - Desenarea unui cerc în SVG cu contur și arhivare de culori în interiorul acestuia
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 4 - Desenarea unei linii drepte cu SVG în HTML5
Putem utiliza eticheta pentru a desena o linie dreaptă în SVG-uri HTML5, culoarea, grosimea liniei și poziția acesteia pot fi definite și ele.
Cod:
ieşire:
Exemplul # 5 - Desenarea unei eclipse prin SVG în HTML5
Putem utiliza eticheta pentru a desena o eclipsă în SVG-uri HTML5, culoarea și poziția acesteia pot fi definite de-a lungul matriței și cu raza ei.
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 6 - Crearea unui poligon cu SVG în HTML5
Eticheta poate fi folosită în SVG-uri pentru a crea poligoane. În etichetă, trebuie să menționăm pozițiile fiecărui punct. Culorile de umplere, grosimea conturului etc. pot fi definite și în cod.
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 7 - Crearea unei polilini cu SVG în HTML5
Polilina este utilizată pentru a desena o formă care va consta doar dintr-o linie dreaptă. Rețineți că și aceste linii trebuie conectate. Iată un exemplu de implementare a poliliniei în HTML5.
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 8 - Desenarea textului cu SVG în HTML5
Textul ar putea fi necesar în orice SVG în multe situații, cum ar fi etichetarea unui grafic, etc. Din fericire, există o etichetă în SVG care poate fi folosită. Textul poate fi setat în orice poziție din SVG și puteți personaliza culoarea și alte detalii.
Cod:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
ieşire:
Exemplul # 9 - Desenarea unei stele cu SVG în HTML5
Acum că am terminat cu elementele de bază, să creăm o stea care va fi făcută cu ajutorul SVG.
Cod:
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.
ieşire:
Exemplul # 10 - Utilizarea gradientului liniar în SVG
Puteți utiliza un gradient liniar și radial în multe linii HTML Canvas SVG. Gradientul trebuie să fie cuibărit în etichetă. Această etichetă este apoi marcată în eticheta SVG pentru a indica utilizarea acesteia. Să aruncăm o privire la un exemplu care folosește Gradient într-o eclipsă.
Cod:
Sorry but this browser does not support inline SVG.
ieşire:
Concluzie
În cazul site-urilor în care trebuie utilizate diagrame și diagrame, SVG-urile sunt salvatoare. Majoritatea browserelor web moderne acceptă și SVG și nu fac decât să fie scalabile. Un alt avantaj al utilizării SVG este dimensiunea fișierului. Deoarece este doar un pic de cod, SVG-urile pot avea o amprentă foarte mică în memorie și lățime de bandă consumată în comparație cu Imagini tradiționale.
Articole recomandate
Acesta este un ghid pentru HTML SVG. Aici discutăm introducerea și primele 10 exemple de HTML SVG cu explicații și implementare de cod. De asemenea, puteți consulta următoarele articole pentru a afla mai multe -
- Html5 Elemente noi
- SVG vs EPS
- Blocuri HTML
- Rame HTML