Векторная графика в Web

виде графических примитивов (геометрических контуров и линий).
Векторная графика не теряет

в качестве при масштабировании
Для Web был разработан стандарт векторной графики SVG (Scalable Vector Graphics).

на основе XML.
Преимущества:
Стили и скрипты: при помощи CSS можно менять

параметры графики, а при помощи JavaScript задавать интерактивность
Поддержка анимации.

и частично описывает поведение XML-процессоров (программ, читающих XML-документы и обеспечивающих

доступ к их содержимому).
XML разрабатывался как язык с простым формальным синтаксисом, удобный для создания и обработки документов программами и одновременно удобный для чтения и создания документов человеком, с подчёркиванием нацеленности на использование в Интернете.
Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах: разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка. 

background-image
Непосредственная вставка кода в документ
С помощью тега

img:


С помощью свойства background-image:
Kiwi

Corp
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}

cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>

Параметры отрисовки можно задать в стиле: style="stroke-width:1; stroke:rgb(0,0,0);"

50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>

fill= "blue" fill-opacity= "0.5" stroke= "red" stroke-width= "1" stroke-opacity="0.3">Мой

x= "70" y= "35“ >кот

#ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]>

cx="60" cy="20" r="15" />

SVG.
http://frontender.info/using-svg/
https://openclipart.org/

кругов (3 цвета)

На основе входных данных определить цену деления шкалы на оси

ординат.
Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5