webattack.pl

SVG

kształty

SVG ma kilka predefiniowanych elementów kształtu:

kod	figura ang	figura pl
<rect>	rectangle	prostokąt
<circle>	circle	koło, okręg
<ellipse>	ellipse	elipsa
<line>	line	linia
<polyline>	polyline	linia łamana
<polygon>	polygon	wielokąt
<path>	path	ścieżka
<text>	text	tekst

<rect> - rectangle - prostokąt

width	szerokość
height	wysokość
x	przesunięcie na osi x
y	przesunięcie na osi y
rx	zaokrąglenie na osi x
ry	zaokrąglenie na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="300" height="250">

      <rect width="200" height="200" style="fill: PaleGreen; stroke: LimeGreen; stroke-width: 20" />

</svg>

wynik kodu


<svg width="300" height="150">

      <rect width="210" height="110" style="fill: PaleGreen; stroke: LimeGreen; stroke-width: 20; opacity: 0.5" />

</svg>

wynik kodu


<svg width="300" height="250">

      <rect width="150" height="150" x="50" y="20" style="fill: PaleGreen; stroke: LimeGreen; stroke-width: 20; fill-opacity: 0.3; stroke-opacity: 0.7" />

</svg>

wynik kodu


<svg width="300" height="250">

      <rect width="150" height="150" x="50" y="20" rx="40" ry="40" style="fill: PaleGreen; stroke: LimeGreen; stroke-width: 20" />

</svg>

wynik kodu

<circle> - circle - koło, okręg

width	szerokość
height	wysokość
cx	środek na osi x
cy	środek na osi y
r	promień
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="200" height="200">

      <circle cx="50" cy="50" r="100" fill="lavender" />

</svg>



<svg width="200" height="200">

      <circle cx="100" cy="100" r="100" fill="lavender" />

</svg>



<svg width="200" height="200">

      <circle cx="150" cy="150" r="100" fill="lavender" />

</svg>

wynik kodu


<svg width="200" height="200">

      <circle cx="50" cy="50" r="90" fill="lavender stroke="gray" stroke-width="0" />

</svg>



<svg width="200" height="200">

      <circle cx="100" cy="100" r="90" fill="lavender stroke="gray" stroke-width="10" />

</svg>



<svg width="200" height="200">

      <circle cx="150" cy="150" r="90" fill="lavender stroke="gray" stroke-width="20" />

</svg>

wynik kodu

<ellipse> - ellipse - elipsa

width	szerokość
height	wysokość
cx	środek na osi x
cy	środek na osi y
rx	promień na osi x
ry	promień na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="300" height="200">

      <ellipse cx="150" cy="100" rx="140" ry="50" style="fill: Lavender; stroke: SlateBlue; stroke-width: 10" />

</svg>

wynik kodu


<svg width="300" height="200" >

      <ellipse cx="150" cy="100" rx="100" ry="30" style="fill: yellow" />

      <ellipse cx="150" cy="75" rx="125" ry="20" style="fill: orange" />

      <ellipse cx="150" cy="50" rx="150" ry="15" style="fill: red" />

</svg>

wynik kodu

<line> - line - linia

width	szerokość
height	wysokość
x1	początek linii na osi x
y1	początek linii na osi y
x2	koniec linii na osi x
y2	koniec linii na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="200" height="40">

      <line x1="0" y1="20" x2="200" y2="20" style="stroke: black; stroke-width: 5" />

</svg>

wynik kodu


<svg width="200" height="60">

  	    <line x1="0" y1="20" x2="120" y2="20" style="stroke: black; stroke-width: 5" />

	    <line x1="160" y1="20" x2="200" y2="20" style="stroke: black; stroke-width: 5" />

	    <line x1="0" y1="40" x2="40" y2="40" style="stroke: black; stroke-width: 5" />

	    <line x1="80" y1="40" x2="200" y2="40" style="stroke: black; stroke-width: 5" />

</svg>

wynik kodu


<svg width="200" height="200">

      <line x1="0" y1="0" x2="200" y2="200" style="stroke: black; stroke-width: 5" />

</svg>

wynik kodu

<polyline> - polyline - linia łamana

width	szerokość
height	wysokość
x1	początek linii na osi x
y1	początek linii na osi y
x2	łamanie linii na osi x
y2	łamanie linii na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="155" height="155">

      <polyline points="10,10 75,10 75,150 150,150" style="fill: White; stroke: Maroon; stroke-width: 5" />

</svg>

wynik kodu


<svg width="155" height="155">

      <polyline points="0,50 50,50 50,100 100,100 100,150 150,150" style="fill: White; stroke: Maroon; stroke-width: 5" />

</svg>

wynik kodu

<polygon> - polygon - wielokąt

width	szerokość
height	wysokość
x1	początek linii na osi x
y1	początek linii na osi y
x2	łamanie linii na osi x
y2	łamanie linii na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="200" height="200">

      <polygon points="10,190 100,10 190,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

</svg>

wynik kodu


<svg width="200" height="200">

  	    <polygon points="10,100 100,10 190,100 100,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

</svg>

wynik kodu


<svg width="200" height="200">

	    <polygon points="10,190 100,10 190,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

  	    <polygon points="10,100 100,10 190,100 100,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

</svg>

wynik kodu


<svg width="200" height="200">

  	    <polygon points="10,100 100,10 190,100 100,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

  	    <polygon points="10,190 100,10 190,190" style="fill: Wheat; stroke: Chocolate; stroke-width: 5" />

</svg>

wynik kodu

<path> - path - ścieżka

Element <path> jest używany do tworzenia linii, krzywych, łuków i innych kształtów.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

symbol	polecenie	polecenie
d	draw	rysować
M	move to	przenieś do / przejdź do (punkt początkowy)
L	line to	linia do
H	horizontal line to	pozioma linia do
V	vertical line to	pionowa linia do
C	cubic Bézier curve	sześcienna krzywa Béziera
S	smooth cubic Bézier curve to	gładka sześcienna krzywa Béziera do
Q	quadratic Bézier curve	kwadratowa krzywa Béziera
T	smooth quadratic Bézier curve to	gładka kwadratowa krzywa Béziera do
A	elliptical Arc	łuk eliptyczny
Z	close path	zamknięcie ścieżki

Wielkie litery oznaczają bezwzględne pozycjonowanie.
Małe litery oznaczają względne pozycjonowanie (np. przesuń 10px w górę i 15px w lewo od ostatniego punktu).

linie

L - narysowanie linii do określonego punktu
H - narysowanie linii do określonego miejsca na osi poziomej
V - narysowanie linii do określonego miejsca na osi pionowej


<svg width="300" height="300">

      <path d="M0 0 L100 100 M200 200 L300 300" fill="red" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290" fill="white" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290 L10 290" fill="white" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M 10 290 L 290 10 L290 290" />

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 L 10 190 Z" fill="Plum" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 H 390 V 190 H 10 Z" fill="SlateGray" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" />

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" fill="transparent" stroke="SlateGray"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 10 10 L 390 10 L390 190 Z" fill="SlateGray" stroke="transparent"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 200 10 L 10 190 L 390 190 Z"/>

</svg>

wynik kodu


<svg width="400" height="200">

	    <path d="M 200 10 L 10 100 L200 190 L 390 100 Z" />

</svg>

wynik kodu


<svg width="200" height="200">

	    <path d="M10 70 H70 V10 H130 V70 H190 V130 H130 V190 H70 V130 H10 V70 Z" />

</svg>

wynik kodu

sześcienna krzywa Béziera

C przyjmuje trzy parametry: pierwszy punkt kontrolny, drugi punkt kontrolny oraz punkt końcowy krzywej.


<svg width="200" height="200">

      <path d="M 10 10 C 70 70, 130 70, 190 10" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 10 C 70 130, 130 130, 190 10" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 10 C 70 190, 130 190, 190 10" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="200" height="200">

      <path d="M 10 190 C 70 130, 130 130, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 190 C 70 70, 130 70, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

      <path d="M 10 190 C 70 10, 130 10, 190 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

gładka sześcienna krzywa Béziera do

S przyjmuje dwa parametry: punkt kontrolny i punkt końcowy krzywej.


<svg width="380" height="380">

      <path d="M 10 190 C 70 10, 130 10, 190 190 S310 370, 370 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="560" height="380">

      <path d="M 10 190 C 70 10, 130 10, 190 190 S310 370, 370 190 S490 10, 550 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

kwadratowa krzywa Béziera

Q przyjmuje dwa parametry: punkt kontrolny i punkt końcowy krzywej.


<svg width="200" height="200">

        <path d="M 10 190 Q100 150, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

        <path d="M 10 190 Q100 0, 190 190" stroke="black" fill="transparent"/>

</svg>



<svg width="200" height="200">

        <path d="M 10 190 Q100 -150, 190 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

gładka kwadratowa krzywa Béziera do

T przyjmuje jeden parametr: punkt końcowy krzywej.


<svg width="380" height="400">

        <path d="M 10 190 Q100 -150, 190 190 T370 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu


<svg width="560" height="400">

        <path d="M 10 190 Q100 -150, 190 190 T370 190 T550 190" stroke="black" fill="transparent"/>

</svg>

wynik kodu

łuki

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy


<svg width="300" height="300">

      <path d="M10 150 A 10 10 1 0 1 50 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 20 20 1 0 1 100 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 150 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>

wynik kodu


<svg width="300" height="300">

      <path d="M10 150 A 20 20 1 0 1 250 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L10 150" fill="red" stroke="black" stroke-width="3" />

</svg>

2 wynik kodu


<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290 L10 290" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 A 30 30 1 0 1 290 150 L290 150 L290 290 L10 290 L10 150" fill="red" stroke="black" stroke-width="3" />

</svg>

3 wynik kodu


<svg width="300" height="300">

      <path d="M10 150 L290 150 A 10 10 0 0 1 50 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 L290 150 A 20 20 0 0 1 100 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M10 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

4 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 10 0 0 1 50 50" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 20 0 0 1 100 100" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

5 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 10 0 0 1 150 175" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 20 0 0 1 150 200" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 250" fill="red" stroke="black" stroke-width="3" />

</svg>

6 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 20 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 30 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

7 wynik kodu


<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 45 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 0 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>



<svg width="300" height="300">

      <path d="M0 150 L290 150 A 10 30 -45 0 1 150 150" fill="red" stroke="black" stroke-width="3" />

</svg>

8 wynik kodu

<text> - text - tekst

width	szerokość
height	wysokość
x	początek linii na osi x
y	początek linii na osi y
fill	kolor
stroke	kolor obramowania
stroke-width	szerokość obramowania
opacity	przezroczystość
fill-opacity	przezroczystość wypełnienia
stroke-opacity	przezroczystość obramowania


<svg width="200" height="50">

      <text x="0" y="15" fill="Blue">Koko dżambo i do przodu.</text>

      <text x="0" y="35" fill="Blue">Koko Koko Euro spoko.</text>

</svg>

wynik kodu


<svg width="200" height="150">

      <text x="0" y="15" fill="Blue" transform="rotate(45 10,40)">Koko dżambo i do przodu.</text>

      <text x="0" y="35" fill="Blue" transform="rotate(45 10,40)">Koko Koko Euro spoko.</text>

</svg>

wynik kodu


<svg width="200" height="150">

      <text x="0" y="15" fill="Blue" transform="rotate(315 150,60)">Koko dżambo i do przodu.</text>

      <text x="0" y="35" fill="Blue" transform="rotate(315 150,60)">Koko Koko Euro spoko.</text>

</svg>

wynik kodu

CIEKAWE KSZTAŁTY

wynik kodu

wynik kodu

wynik kodu

wynik kodu