css vs svg для создания простых изображений

#html #jquery #css #svg #изображения

На странице требуется создать несколько (не больше сотни точно, скорее десяток) интерактивных
рисунков (надписи и некоторые элементы могут быть кнопками/ссылками)



Подскажите, что  лучше использовать  css или svg.
Лично пока склоняюсь к css + jQuery для позиционирования элементов
    

Ответы

Ответ 1

Для графики, где много линий, кругов, фигур со сложными контурами лучше использовать
SVG. Графика должна быть векторной.
 Не надо ставить вопрос,-  только SVG или только CSS и JS . Вся эта троица прекрасно
дополняет друг друга.
В вашем примере, конечно лучше использовать SVG. Узоры повторяются, значит нужно
использовать pattern, в который необходимо поместить одно звено цепи, а потом автоматически
заполнять выбранный регион элементом паттерна. 
Заполнение паттерном идет по рядам, слева направо, после заполнения одного ряда,
начинается заполнение следующего ряда.
Подробнее о svg патернах здесь и здесь

Ниже пример кода для одного звена:      



#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}





В секции ...  с помощью базовых фигур создаем элемент паттерна. 
Он не будет виден до тех пор пока мы не используем его для заполнения какой-то фигуры.
Фигура внутри паттерна может иметь любые очертания, но она всегда заключена в прямоугольник,
который должен быть не меньше габаритных размеров самой фигуры.
 В нашем случае размеры паттерна определяют    width="106" height="16"     

Команда заполнения паттерном : 

    


Габаритные размеры прямоугольника равны размерам паттерна, поэтому разместилось одно
звено.   

Для увеличения количества звеньев просто увеличим ширину прямоугольника. Понятно,
чтобы не было обрезки последней фигуры, необходима кратность размеров

Пример с пятью звеньями    



#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}



     

И ещё один пример с многорядовым заполнением: 



#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}



  

Решение полностью адаптивно, работает во всех браузерах, включая IE11, Edge