Блог о веб-разработке > SVG > Основные формы SVG

Основные формы SVG

Для создания прямоугольника с помощью SVG используется тег <rect>. Пример:

<rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" />

1	<rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" />

Основные параметры:

x, y координаты левого верхнего угла квадрата;
width, height ширина и высота фигуры. В некоторых случаях, может задаваться в процентах
fill цвет заполнения фигуры
stroke цвет контура
stroke-width ширина контура

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 500 600" version = "1.1">
    <rect x = "100" y = "100" width = "400" height = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
    <rect x = "100" y = "350" rx = "100" ry = "50" width = "400" height = "200" fill = "salmon" stroke = "black" stroke-width = "3"/>
</svg>

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

</svg>

Следующая фигура — круг.

<circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" />

1	<circle cx="100" cy="100" r="80" fill="orange" stroke="navy" stroke-width="10" />

Параметры:

cx, cy координаты центра круга.
r радиус круга
fill цвет заливки фигуры
stroke цвет контура
stroke-width ширина контура

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 200 200" version = "1.1">
    <circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/>
</svg>