Можно ли весь сайт делать на svg?

280
05 декабря 2017, 19:33

Что если html-верстку сайта сделать только с svg изображениями, вместо стандартных img или png, не будет никаких проблем? Кроссбраузерность и прочее?

Answer 1

Для SVG нужно указывать viewBox аттрибут, если вы хотите поведение svg, как картинки. Иначе svg не будет масштабироваться. Насколько это является проблемой - вам решать. В остальном - современные браузеры поддерживают svg давно, можно не париться.

Вторая проблема - svg труднее сделать, чем png. Художники/дизайнеры как правило работают с растровой графикой: векторный svg скорее является в web полезным дополнением, нежели новым подходом.

Например под векторную графику был заточен Flash, но он сейчас не живой.

Answer 2

Можно ли весь сайт делать на svg?

Ответ - нет. Так как вопрос поставлен слишком широко.
Если бы автор спросил,- можно-ли сделать всю оформительскую графику, анимацию, интерактивную картографию на SVG?, то ответ был-бы - ДА!
Так как формат SVG именно для этого и разработан. Графика на сайте должна быть векторной, а не растровой. Не хочется повторять избитые истины на тему,- что вектор легче по весу, а значит сайты летают быстрее. Вектор масштабируемый по определению, поэтому не надо особых ухишрений, чтобы сайт одинаково великолепно смотрелся, как на маленьких экранах смартфонов, так и на гигантских видеопанелях.

9 ноября 2017 года вышла официальная версия Scalable Vector Graphics SVG2

Возможности SVG при этом значительно расширяются. В частности, появился новый элемент Mesh gradients

Конические градиенты

  • Отдельный разговор про анимацию SVG SMIL.

    Вот уже три года Chrome пишет, что smil "deprecated",- в переводе означает, что он не одобряет smil, но тем не менее продлевает каждый раз его поддержку.

Смотрите, это уже идет с 45 версии до 62 текущей версии Chrome и продлено уже сейчас, как минимум до 65 будущей версии. Как говорится ничего нет более постоянного,чем временное.
Почему это происходит, почему не закрывают smil и не закроют в ближайшее время?
Потому-что основные конкуренты: CSS Animations Level 1, Web Animations не дотягивают до уровня smil SVG.
Все виды, любой сложной CSS анимации с простынями кода, легко и просто реализуются в несколько строк на SVG. Но наоборот, просто невозможно перевести некоторые примеры анимации SVG в CSS.
Например: движение по криволинейному пути текста, объектов, маркеров.

  <svg  width="55%" height="55%"  viewBox="0 0 300 200" > 
  
<defs> 
<style type="text/css"><![CDATA[ 
	#startButton:hover { 
		text-decoration: underline; 
		fill:green; 
		opacity: 0.5; 
		 			} 
	#stop:hover{ 
	    opacity: 0.5;  
	           }	  
		 ]]>  
		  
	 
 </style>   
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"  
        markerUnits="strokeWidth" orient="auto" 
          markerWidth="4" markerHeight="3"> 
        <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
 </marker> 
  
  <linearGradient id="grad1" x2="0%" y2="100%" 
		spreadMethod="pad" > 
  <stop offset="0%" stop-color="skyblue"/> 
  <stop offset="90%" stop-color="white"/>  
  <stop offset="100%" stop-color="yellowgreen"/> 
</linearGradient> 
 
  <path id="balerina" transform="scale(0.05)  translate(-100 -200)"   d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd" /> 
	  
 
 </defs> 
	 
 
   <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" /> 
 
    <path id="t_path"  d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none"   /> 
 
 
	 
	  
	  <path transform="  scale(0.15) scale(-1 1) translate(-10 -200) " fill="black"  d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd"> 
	 <animateMotion  begin="startButton.mouseover+0.1s" end="stopRed.mouseover" 
		 dur="18s" repeatCount="1" rotate="auto" fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
	 </path> 
 
<use xlink:href="#balerina"  style="fill:orangered;"  > 
	 <animateMotion  begin="startButton.mouseover+0.25s" end="stopOrangered.mouseover" 
		 dur="6s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
</use>   
 
<use xlink:href="#balerina"  style="fill:purple;" > 
	 <animateMotion  begin="startButton.mouseover+0.25s" end="stopTeal.mouseover" 
		 dur="8s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
</use> 
 
	 
<g 	id="startButton" transform="scale(0.7) translate(-20 220)" > 
<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" /> 
<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"  
fill="white" >Start</text>  
</g> 
 <g transform="translate(95 -5)"> 
<g id="stop" fill-opacity="1" >	 
   <rect  x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		 
	<g id="stopRed" > 
		<circle  r="6" cx="190" cy="150" fill="none" stroke="black"  />	 
		<circle  r="4" cx="190" cy="150" fill="black"  />	 
	</g>	 
		<g id="stopOrangered" > 
			<circle  r="6" cx="190" cy="170" fill="none" stroke="black"  />	 
			<circle  r="4" cx="190" cy="170" fill="orangered" stroke="orange"  />	 
		</g> 
	<g id="stopTeal" > 
		<circle r="6" cx="190" cy="190" fill="none" stroke="black"  />	 
		<circle  r="4" cx="190" cy="190" fill="darkblue" stroke="orange"  />	 
	</g>		 
	 
</g> 
	<text  x="170" y="170"  transform="rotate(-90 170,170)"  
	  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop 
	</text> 
</g>	 
</svg>

  • SVG и CSS очень хорошо дополняют друг друга. CSS включил в свои правила атрибуты и параметры SVG.

Например: для окраски строк, заполнение цветом svg в css добавлено stroke:#, fill:#

READ ALSO
Не отображается изображение в JSP

Не отображается изображение в JSP

В Java давно, а в Java EE совсем недавноРазбираюсь в азах, так сказать

262
Overflow scroll в блоке с positin absolute

Overflow scroll в блоке с positin absolute

Есть абсолютно спозиционированная менюшкаМенюшка имеет определенные размеры => если много текста, то должен появиться у нее скрол, но если...

388
css отступы на примерах

css отступы на примерах

Есть несколько вопросов по отступам на конкретных примерах:

637
retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию вместо десктопной

retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию вместо десктопной

retina macbook автоматически увеличивает масштаб страницы и отображает планшетную версию сайта с шириной контейнера 940px вместо того чтобы отображать...

238