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

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

Ответы

Ответ 1

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

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

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


Ответ 2

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


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

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

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

         

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




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

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


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



  




Ещё пример

Анимация ссылок с помощью кривых Безье     

анимация начинается при наведении курсора на ссылку





 
  
 
 
 
   
 
  
 
 
 





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


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

Перечень всех атрибутов, которые можно использовать и в SVG и в CSS 

Update 20.10.2018

Ссылка на сайт, сделанный полностью на SVG:


Ответ 3

Если сайт предназначен не для чтения, а это веб приложение, например для рисования или игра, то на мой взгляд его НУЖНО делать как минимум при помощи SVG. 

Еще есть CANVAS он приходит на помощь когда SVG начинает медленно работать из-з
того, что это все-таки DOM элементы, или когда возможностей SVG недостаточно (3D графика).



Перимущества SVG:


Все то что вытекает из того что SVG векторный формат с довольно несложным синтаксисом,  те позволяет легко создавать элементы "сложной формы".
Простота взаимодействия - за счет поддержки DOM событий, поддержка CSS, все как с HTML элементами. 
Богатейшие встроенные возможности работы с фильтрами, масками, анимациями.




Недостатки SVG:


Все-таки это DOM структура, и если она большая, то скорость рендеринга может упасть.
Разная поддержка спецификации в разных браузерах/устройствах.
Сложновато, по сравнению с HTML верстать обычный текст, однако никто не запрещает использовать для этого обычный же HTML




Пример, редактор сплайнов и симметрия, смотрите развернутым:





let size = 800;

let color = d3.scaleLinear(d3.schemeCategory10)

var points = d3.range(0, 5).map(function(i) {
  return [
      size/2 - Math.sin(i/3)*100*Math.random(), 
      size/2 + i*(33+33*Math.random())];
});

let dragged = null,
    selected = points[points.length-1];

let line = d3.line().curve(d3.curveCardinal);

let svg = d3.select("svg")
    .attr("width", size)
    .attr("height", size);

svg.append("rect")
    .attr("width", size)
    .attr("height", size)
    .on("mousedown", mousedown);

let copies = svg.append("g");

let path = svg.append("path")
    .style("stroke", 'red')
    .datum(points)
    .classed("line", true);

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

fillCopies();
redraw();

d3.select('#axes').on('input', redraw)

function fillCopies() {
    
  copies.html('');
  let axes = d3.select('#axes').node().value;
  for (let i = 0; i < axes; i++) {
      
      let transformValue = `
        translate(${size/2} ${size/2}) 
        rotate(${i*(360/axes)}) 
        translate(${-size/2} ${-size/2})
      `;
      
       axes-1&&copies.append("line")
        .attr('x1', -size)
        .attr('y1', size/2)
        .attr('x2', size/2)
        .attr('y2', size/2)
        .attr('transform', transformValue)
      
      i && copies.append("path")
        .style('stroke', color(i/axes))
        .attr('transform', transformValue)
        .datum(points)
        .classed("line", true)
  
  }
}


function redraw() {
    
  fillCopies();
    
  svg.selectAll("path").attr("d", line);  

  var circle = svg.selectAll("circle.knob")
      .data(points, d => d);

  circle.exit()
      .remove();
    
  let newNodes = circle.enter()
      .append("circle")
      .classed('knob', true)
      .attr("r", 1e-6)
      .on("mousedown", d => { 
          selected = dragged = d; 
          redraw(); 
      })
      .transition()
      .duration(250)
      .attr("r", 6.5);

  circle.merge(newNodes)
      .classed("selected", d => d === selected)
      .attr("cx", d => d[0])
      .attr("cy", d => d[1]);

  if (d3.event) {
    d3.event.preventDefault();
    d3.event.stopPropagation();
  }
}

function mousedown() {
  points.push(selected = dragged = d3.mouse(svg.node()));
  redraw();
}

function mousemove() {
  if (!dragged) 
      return;
  let m = d3.mouse(svg.node());
  dragged[0] = Math.max(0, Math.min(size, m[0]));
  dragged[1] = Math.max(0, Math.min(size, m[1]));
  redraw();
}

function mouseup() {
  if (!dragged) 
      return;
  mousemove();
  dragged = null;
}

   
body {
    margin: 0;
}

rect {
  fill: none;
  pointer-events: all;
}

line {
   stroke: gray; 
   stroke-dasharray: 5 10;
}

circle,
.line {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}

circle {
  fill: #fff;
  fill-opacity: .2;
  cursor: move;
}

.selected {
  fill: #ff7f0e;
  stroke: #ff7f0e;
}

.ui {
    padding: 5px;
    padding-top: 10px;
    box-shadow:  0 1px 1px 0 lightgray;
}











Приемущества CANVAS:


Наличие 2D и 3D контекста.
Практически безграничные возможности графического программирования, тут все зависит от Вас, будет это работать быстро или нет.
Возможность утилизировать мощность видеокарты, причем не только для графики, но и для расчетов.
Вы сможете открыть для себя нечто новое в (веб) программировании =)




Недостатки CANVAS:


Относительно сложный(2D) и очень сложный(3D) API. (Высокий порог вхождения)
Отсутствие механизмов взаимодействия с элементами, т.е. Вам самим надо проверят
где пользователь возит мышкой и самим реагировать на это.
Сложность отладки. (Ничего вы не посмотрите в инспекторе итд)




Пример: 3D фрактал - Губка Менгера, получен при помощи трассировки лучей во фрагментном шейдере. 

В примере реализованы:


освещение/затенение по фонгу подвижным источником света
мягкие тени
ambient occlusion


управление: 

drag = rotate

scroll = zoom





let fragCode = [...document.scripts].find(s => s.type === "frag").textContent;

let fst = FullScreenTriangle(fragCode);
let resolution = fst.triangleProgram.uniform('2f', 'resolution');
let time = fst.triangleProgram.uniform('1f', 'time');
let eye = fst.triangleProgram.uniform('3f', 'eye');
let lightPos = fst.triangleProgram.uniform('3f', 'lightPos');
let started = new Date().getTime();

Mouse3D.init();

animate();

function animate() {
    requestAnimationFrame(animate);
    drawFrame();
}

function drawFrame() {
    let t = (new Date().getTime() - started)/1000;
    resolution.set(fst.gl.drawingBufferWidth, fst.gl.drawingBufferHeight);
    time.set(t);
    eye.set(Mouse3D.eye[0], Mouse3D.eye[1], Mouse3D.eye[2]);
    lightPos.set(Math.cos(t/3)*0.8,0,Math.sin(t/3)*0.8);
    fst.draw();
}
body {
    margin: 0;
    overflow: hidden
}
canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}