Проектирование всех веб-страниц в виде файлов SVG

Отказ

Я понимаю, что, учитывая абсурдность названия, это звучит как тролль. Однако это настоящий вопрос. Мой опыт включает сборку OpenGL/x86. Недавно я начал изучать веб-программирование. Мне очень нравится SVG + CSS, и мне было интересно: почему люди не проектируют все веб-страницы в SVG?

Контекст

  • SVG предоставляет красивые примитивные: квадратичные + кубические кривые безье; линии + заполнение - все как векторная графика
  • SVG предоставляет текст
  • SVG обеспечивает аффинные преобразования

Вопросы

  • Есть ли примеры людей, которые проектируют целые сайты как гигантский файл SVG?
  • Если нет, то какие ограничения?
  • Есть ли производительность при использовании SVG-примитивов, а не divs/tables?

Ответы

Ответ 1

Это возможно; например, вы можете встраивать HTML-фрагменты в документы SVG, чтобы получить такие вещи, как гиперссылки.

Однако есть некоторые существенные недостатки, по крайней мере в настоящее время:

  • Современные веб-браузеры рассматривают SVG как изображения и не могут представлять собой хороший пользовательский интерфейс для пользователей. Например, я думаю, что Firefox не позволяет пользователю выбирать текст в файлах SVG.
  • Вы теряете разделение контента и презентации. Хотя SVG использует CSS, и вы можете в принципе поддерживать разделение, если вы редактируете вручную, вы, вероятно, разрабатываете макет вместе с контентом. Это имеет несколько недостатков:
    • В качестве следствия сложнее адаптировать результирующую страницу к другим форматам. В частности:
    • Какое поведение при изменении размера текста? документ напечатан? изменение размера окна? Трудно создать сложный чертеж, который хорошо поддерживает reflow (и если ваш рисунок не является сложным, вы можете просто использовать HTML + CSS).
    • Поддержка чтения с экрана: поскольку порядок не ясен (см. ниже), программа чтения с экрана может дать непонятный, скремблированный вывод. В основном, устройства чтения с экрана могут предполагать, что SVG является изображением и даже не пытается прочитать текст.
  • SVG основан исключительно на XML и поэтому требует строгого соблюдения правил. С (X) HTML вы можете использовать обычную сериализацию HTML. Затем многие из этих правил смягчаются, а браузеры более надежны, если вы кормите их фиктивным вводом (в отличие от XML PARSING ERROR, если у вас есть один неулокальный >).
  • Текущие поисковые системы, вероятно, не будут индексировать ваши страницы (они будут рассматривать их только как монолитные изображения). Не обращайте внимания
  • Порядок содержания не ясен. Инструменты, такие как Inkscape, не нуждаются в заботе о том, что элементы порядка выводятся, если они правильно расположены на выходе, а порядок z правильный. Но если вы создаете веб-страницу, это имеет значение, потому что читатели экрана не знают наверняка, какой элемент семантически первым. Это не проблема, если вы только редактируете SVG вручную, но обычные инструменты SVG могут скремблировать ваш заказ. С HTML, как правило, ясно.
  • Сложно реализовать идентификаторы фрагментов (#id_of_some_element в конце URL-адреса). Ниже представлена ​​презентационная программа, но я думаю, что это зависит от Javascript (плохо для поисковых систем и людей с отключенным javascript). (я не уверен в этом) * ̶ подмигнули трудно превратить в текст ̶ (для поисковиков, ̶ SCREEN считывателей, ̶ COPY и вклейки, ̶ и т.д.) ̶, ̶ особенно при сгенерированных с помощью Graphical ̶t̶o̶o̶l̶s̶.̶ Например, ̶ Http: ̶/̶/̶w̶w̶w̶.̶a̶f̶r̶o̶k̶a̶d̶a̶n̶s̶.̶c̶o̶m̶/̶P̶a̶g̶e̶_̶0̶1̶.̶s̶v̶g̶ проявляется в Google, как ̶ ̶D̶A̶N̶S̶E̶ ̶E̶T̶ ̶M̶I̶S̶E̶ ̶E̶N̶ ̶F̶O̶R̶M̶E̶ ̶B̶I̶E̶N̶V̶E̶N̶U̶E̶ ̶D̶ ̶a̶ ̶n̶ ̶s̶ ̶e̶ ̶r̶ ̶p̶o̶ ̶u̶ ̶r̶ ̶c̶é̶ ̶l̶ ̶é̶b̶ ̶r̶ ̶e̶ ̶r̶ ̶l̶ ̶a̶ ̶v̶ ̶i̶e̶.̶ ̶E̶ ̶n̶ ̶v̶e̶ ̶l̶ ̶o̶p̶p̶ ̶é̶ ̶e̶ ̶d̶ ̶e̶ ̶t̶ ̶a̶ ̶m̶ ̶b̶ ̶o̶ ̶u̶r̶ ̶s̶ ̶i̶n̶ ̶d̶o̶ ̶c̶ ̶i̶l̶ ̶e̶ ̶s̶ ̶e̶ ̶t̶ ̶i̶ ̶n̶ ̶c̶e̶ ̶s̶s̶ ̶a̶ ̶n̶t̶s̶. С другой стороны, ̶ дАЖЕ дерьмовый WYSIWYG HTML гЕНЕРАТОРЫ ̶w̶o̶n̶'̶t̶ дробить пробегов TEXT LIKE ̶t̶h̶a̶t̶.̶

Что-то нужно учитывать, так это возможность встраивания элементов SVG в XHTML и HTML 5, поэтому вы получаете некоторые преимущества, не выбрасывая браузеры/поисковые системы.

Существующее использование

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

Ответ 2

На самом деле здорово думать, что файл изображения .svg можно использовать для создания веб-страницы, не зная ни одного html. Учитывая, насколько беспорядочными html-стандартами, иметь возможность использовать файл Inkscape.svg, может быть намного легче для людей, которые естественно художественны. Когда вы думаете о том, что Inkscape и Openclipart в основном полезны для людей, занимающихся настольной издательской системой, Scrapbooking и т.д., Чтобы иметь возможность экспортировать веб-страницу непосредственно из Inkscape, было бы мощным инструментом.

Что касается 600-летнего набора, мы находимся в 21-м веке, и публикация средств массовой информации не должна соответствовать средневековым идеям форматирования. У наборов есть свой дворец, но мы говорим о мощном эксперименте, который может помочь "средним пользователям Джо" превратить свое искусство в веб-страницы, не зная CSS или HTML.

Для справки, команда Opera провела довольно много работы с использованием SVG для веб-страниц - http://dev.opera.com/articles/svg/

Ответ 3

На самом деле есть страницы, которые сильно зависят от SVG; используя библиотеку Javascript, такую ​​как Raphaël - это обычный способ сделать это. Paper.js также стоит заглянуть, хотя они выбрали не использовать SVG.

Ответ 4

Вы действительно можете создавать целые веб-сайты с помощью SVG, я делаю это уже много лет. Если вы хотите изменить, как вы смотрите на создание страниц (Think Cards), тогда это просто вопрос проб и ошибок.