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

288

14 марта 2018, 04:22

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

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

Answer 1

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

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

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

<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet"> 
<defs> 
<pattern id="circleLine"   x="0" y="0" width="106" height="16" 
             patternUnits="userSpaceOnUse" > 
<g> 
			 <polyline points="16,8 107,8" stroke="#3D6B93" /> 
 
  
 
<circle id="bigCircle" cx="8" cy="8" r="7"  />  
<circle id="centerCircle" cx="8" cy="8" r="2.5"   />  
<circle id="leftCircle" cx="16" cy="8" r="2.5"  />  
<circle id="rightCircle" cx="104" cy="8" r="2.5"  /> 
</g> 
</pattern> 
</defs>  
 
<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" />  
</svg>

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

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

<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" />

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

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

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

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

<svg viewBox="0 0 550 100" preserveAspectRatio="xMinYMin meet"> 
<defs> 
<pattern id="circleLine"   x="0" y="0" width="107" height="16" 
             patternUnits="userSpaceOnUse" > 
<g> 
			 <polyline points="16,8 107,8" stroke="#3D6B93" /> 
 
  
 
<circle id="bigCircle" cx="8" cy="8" r="7"  />  
 
<circle cx="1" cy="8" r="2.5" fill="#3D6B93" />  
 
<circle id="centerCircle" cx="8" cy="8" r="2.5"   />  
<circle id="leftCircle" cx="16" cy="8" r="2.5"  />  
<circle id="rightCircle" cx="108" cy="8" r="2.5"  /> 
</g> 
</pattern> 
</defs>  
 
<rect y="16" width="530" height="16" stroke="none" fill="url(#circleLine)" />  
</svg>

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

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

<svg viewBox="0 0 550 150" preserveAspectRatio="xMinYMin meet"> 
<defs> 
<pattern id="circleLine"   x="0" y="0" width="107" height="16" 
             patternUnits="userSpaceOnUse" > 
<g> 
			 <polyline points="16,8 107,8" stroke="#3D6B93" /> 
 
  
 
<circle id="bigCircle" cx="8" cy="8" r="7"  />  
 
<circle cx="1" cy="8" r="2.5" fill="#3D6B93" />  
 
<circle id="centerCircle" cx="8" cy="8" r="2.5"   />  
<circle id="leftCircle" cx="16" cy="8" r="2.5"  />  
<circle id="rightCircle" cx="108" cy="8" r="2.5"  /> 
</g> 
</pattern> 
</defs>  
 
<rect y="16" width="530" height="128" stroke="none" fill="url(#circleLine)" />  
</svg>