Можно ли весь сайт делать на svg?
1,00
р.
Что если html-верстку сайта сделать только с svg изображениями, вместо стандартных img или png, не будет никаких проблем? Кроссбраузерность и прочее?
Ответ
Можно ли весь сайт делать на svg?
Ответ - нет. Так как вопрос поставлен слишком широко. Если бы автор спросил,- можно-ли сделать всю оформительскую графику, анимацию, интерактивную картографию на SVG?, то ответ был-бы - ДА! Так как формат SVG именно для этого и разработан. Графика на сайте должна быть векторной, а не растровой. Не хочется повторять избитые истины на тему,- что вектор легче по весу, а значит сайты летают быстрее. Вектор масштабируемый по определению, поэтому не надо особых ухищрений, чтобы сайт одинаково великолепно смотрелся, как на маленьких экранах смартфонов, так и на гигантских видео панелях.
26 февраля 2021 года вышла официальная версия Scalable Vector Graphics SVG2
Возможности SVG при этом значительно расширяются. В частности, появился новый элемент Mesh gradients
Конические градиенты
Отдельный разговор про анимацию SVG SMIL.
Вот уже четыре года Chrome пишет, что smil "deprecated",- в переводе означает, что он не одобряет smil, но тем не менее продлевает каждый раз его поддержку.
Смотрите, это уже идет с 45 версии до 78 текущей версии Chrome и продлено уже сейчас, как минимум до 77 далее test on real browser 115-117 -- 23 августа 2023 года будущей версии. Как говорится ничего нет более постоянного, чем временное. Почему это происходит, почему не закрывают smil и не закроют в ближайшее время? Потому-что основные конкуренты: CSS Animations Level 1, Web Animations не дотягивают до уровня smil SVG. Все виды, любой сложной CSS анимации с простынями кода, легко и просто реализуются в несколько строк на SVG. Но наоборот, просто невозможно перевести некоторые примеры анимации SVG в CSS. Например: движение по криволинейному пути текста, объектов, маркеров.
<![CDATA[ #startButton:hover { text-decoration: underline fill:green opacity: 0.5 } #stop:hover{ opacity: 0.5 } ]]>
Start Stop
Ещё пример
Анимация ссылок с помощью кривых Безье
анимация начинается при наведении курсора на ссылку
<!DOCTYPE html> svg { background-image: url(https:/3-us-west-2.amazonaws.com.cdpn.io/4273/hawaii-beach.jpg) background-size:cover width:50% height:50% }
So easy to do with SVG just few lines
SVG и CSS очень хорошо дополняют друг друга. CSS включил в свои правила атрибуты и параметры SVG.
Например: для окраски строк, заполнение цветом элементов svg, в css добавлено stroke:#, fill:#
Перечень всех атрибутов, которые можно использовать и в SVG и в CSS
Update 20.10.2018
Ссылка на сайт, сделанный полностью на SVG:
Ответ
Можно ли весь сайт делать на svg?
Ответ - нет. Так как вопрос поставлен слишком широко. Если бы автор спросил,- можно-ли сделать всю оформительскую графику, анимацию, интерактивную картографию на SVG?, то ответ был-бы - ДА! Так как формат SVG именно для этого и разработан. Графика на сайте должна быть векторной, а не растровой. Не хочется повторять избитые истины на тему,- что вектор легче по весу, а значит сайты летают быстрее. Вектор масштабируемый по определению, поэтому не надо особых ухищрений, чтобы сайт одинаково великолепно смотрелся, как на маленьких экранах смартфонов, так и на гигантских видео панелях.
26 февраля 2021 года вышла официальная версия Scalable Vector Graphics SVG2
Возможности SVG при этом значительно расширяются. В частности, появился новый элемент Mesh gradients
Конические градиенты
Отдельный разговор про анимацию SVG SMIL.
Вот уже четыре года Chrome пишет, что smil "deprecated",- в переводе означает, что он не одобряет smil, но тем не менее продлевает каждый раз его поддержку.
Смотрите, это уже идет с 45 версии до 78 текущей версии Chrome и продлено уже сейчас, как минимум до 77 далее test on real browser 115-117 -- 23 августа 2023 года будущей версии. Как говорится ничего нет более постоянного, чем временное. Почему это происходит, почему не закрывают smil и не закроют в ближайшее время? Потому-что основные конкуренты: CSS Animations Level 1, Web Animations не дотягивают до уровня smil SVG. Все виды, любой сложной CSS анимации с простынями кода, легко и просто реализуются в несколько строк на SVG. Но наоборот, просто невозможно перевести некоторые примеры анимации SVG в CSS. Например: движение по криволинейному пути текста, объектов, маркеров.
<![CDATA[ #startButton:hover { text-decoration: underline fill:green opacity: 0.5 } #stop:hover{ opacity: 0.5 } ]]>
Start Stop
Ещё пример
Анимация ссылок с помощью кривых Безье
анимация начинается при наведении курсора на ссылку
<!DOCTYPE html> svg { background-image: url(https:/3-us-west-2.amazonaws.com.cdpn.io/4273/hawaii-beach.jpg) background-size:cover width:50% height:50% }
So easy to do with SVG just few lines
SVG и CSS очень хорошо дополняют друг друга. CSS включил в свои правила атрибуты и параметры SVG.
Например: для окраски строк, заполнение цветом элементов svg, в css добавлено stroke:#, fill:#
Перечень всех атрибутов, которые можно использовать и в SVG и в CSS
Update 20.10.2018
Ссылка на сайт, сделанный полностью на SVG:
