SVG w HTML | Samouczek z przykładami

HTML5 zapewnia technologię SVG (akronim Skalowal Vector Graphics) do rysowania dwuwymiarowej grafiki opartej na wektorach na stronach internetowych. W przeciwieństwie do innych formatów obrazów (takich jak PNG, JPG itp.) SVG nie polega na pikselach, a zamiast tego wykorzystuje dane wektorowe.

World Wide Web Consortium (W3C) zaleca technologię SVG do rysowania grafiki na stronie internetowej. W html Tag jest używany jako pojemnik do grafiki SVG i za pomocą SVG możemy rysować ścieżki, kółka, prostokąty itp. Ten zapis poprowadzi Cię na temat pracy z obrazami SVG i przedstawić szczegółowy przegląd w następujących aspektach:

• Podstawy SVG
• Jak narysować linię SVG w HTML
• Jak narysować koło SVG w HTML
• Jak narysować prostokąt SVG w HTML
• Jak narysować zaokrąglony prostokąt SVG w HTML
• Jak narysować wielokąt SVG w HTML
• Jak narysować svg eclipse html

A więc zacznijmy!

Podstawy SVG

Skalowalne grafiki wektorowe określają formaty grafiki/obrazu oparte na XML dla technologii internetowych. Pliki SVG mogą być animowane i możemy zintegrować je z innymi standardami W3C, takimi jak DOM i XSL. SVG zapewnia wysokiej jakości obrazy i.mi. Jeśli ktoś powiększy obraz SVG, nie wpłynie to na jakość obrazu.

Jak narysować linię SVG w HTML

Tag HTML może być używany w obrębie tag, aby narysować linię. Poniższy przykład dany pozwoli ci zrozumieć, jak narysować linię SVG w HTML.

Przykład

Poniższy kawałek kodu rysuje prostą linię:

Linia SVG nie jest obsługiwana!

Tutaj, w powyższym fragmencie, x1, y1 są punktami początkowymi linii, a x2, y2 to punkty końcowe linii. Podczas gdy określamy kolor linii w atrybucie stylu:

Wyjście weryfikuje, że linia w kolorze niebieskim jest rysowana zgodnie z pozycjami ustalonymi przez jej atrybuty.

Jak narysować koło SVG w HTML

Tag HTML może być używany w obrębie tag, aby narysować koło.

Przykład
Poniższy fragment pozwolą ci poprowadzić okrąg SVG:

SVG Circle nie jest obsługiwane!

Określiliśmy wartość osi x i osi y odpowiednio jako 40 i 50 wraz z promieniem 30 pikseli. Poniżej pojawi się wyjście:

Wyjście weryfikuje, że koło jest rysowane w kolorze niebieskim i wypełnione szarym kolorem.

Jak narysować prostokąt SVG w HTML

Tag może być używany w znaczniku do narysowania prostokąta.

Przykład

Poniższy fragment kodu ustawia szerokość, wysokość prostokąta SVG odpowiednio jako 250, 100, a prostokąt zostanie wypełniony szarym kolorem.

Określiliśmy odpowiednio kolor skoku i szerokość skoku odpowiednio jako niebieski, a 5. Poniżej pojawi się wyjście:

Jak narysować zaokrąglony prostokąt SVG w HTML

Musimy określić atrybuty RX, RY w znaczniku, aby narysować zaokrąglone rogi prostokąta SVG.

Przykład

Rozszerzmy poprzedni przykład i ustaw wartość Rx, Ry jako 10px, aby narysować zaokrąglone zakątki prostokąta SVG:

Powyższy fragment kodu wyświetla następujące dane wyjściowe:

Jak narysować wielokąt SVG w HTML

HTML zapewnia znacznik do narysowania kształtu, który ma co najmniej 3 strony. Atrybut o nazwie „Punkty” można użyć do określenia osi x i osi y wszystkich stron.

Przykład

Rozważmy następujący fragment kodu, aby zrozumieć, jak ustawić oś x i osi y kształtu:

Tag może być używany do rysowania różnych kształtów, takich jak gwiazda SVG lub jakikolwiek inny zamknięty kształt.

Jak narysować svg eclipse html

znacznik służy do narysowania kształtu zaćmienia, jest bardzo podobny do koła. Okrąg SVG ma równy promień poziomy i pionowy, ale w zaćmieniu promień poziomy i pionowy różni się od siebie.

Przykład

Poniższy fragment pokazuje, jak narysować zaćmienie w HTML, gdzie rx = „150” jest promieniem poziomym i Ry = „75” jest pionowym promieniem zaćmienia:

Powyższy fragment kodu pokazuje następujący wynik:

Niebieski kolor obramowania/skoków i wypełniony szarem kształt zaćmienia sprawdził, czy znacznik działał prawidłowo.

Wniosek

Ten zapis pokazał, jak rysować podstawowe obrazy SVG w HTML. Wewnątrz znacznika można wykorzystać różne znaczniki do rysowania różnych obrazów SVG, takich jak ,, i tagi można użyć odpowiednio odpowiednio linii SVG, kół, prostokątów, wielokątów i kształtu zaćmienia. W tych znacznikach można zastosować różne atrybuty, takie jak udar i szerokość udaru.