Статьи

Что каждый должен знать об использовании SVG прямо сейчас

Январь 13, 2019

Часто самая большая проблема с действительно хорошей вещью — просто то, что недостаточно людей знают, как ее использовать. Конечно, это своего рода проблема курицы и яйца, с которой до боли знакомы веб-разработчики. Это зависит от производителей, чтобы поддержать технологию, прежде чем она будет использована, или от разработчиков нужно реализовать материал, использующий технологию, чтобы заставить производителей поддерживать ее?

Так обстоит дело с SVG, фантастически способной, хотя и не полностью совместимой с браузером, графической технологией. Я сам не являюсь производителем браузеров, и сейчас я считаю, что если есть что-то хорошее, я мог бы просто начать его использовать. Возможно, если бы все просто взяли на себя обязательство защищать хорошие технологии таким образом, меньше людей было бы заботиться о том, должна ли отрасль начинаться с курицы или яйца.

Несмотря на это, когда я начинал чувствовать себя заинтригованным SVG и его потенциалом, я хотел бы, чтобы кто-то дал мне один общий обзор того, что мне нужно было знать. К счастью, через несколько лет этим человеком был Дмитрий Барановский . Самым важным, что он сказал мне (и остальной аудитории в Web Directions South), было то, что я мог сразу начать использовать SVG в производственных проектах .

Что такое SVG?

Для тех, кто еще не знает, что такое SVG, позвольте мне кратко повторить, чтобы объяснить, почему SVG так хорош . В предложении, согласно Adobe , который был очень ранним чемпионом создатели технологии:

Масштабируемая векторная графика (SVG) — это текстовый графический язык, который описывает изображения с векторными фигурами, текстом и встроенной растровой графикой.

Хорошо, но что это значит?

  • Масштабируемость означает, что технология изначально не зависит от разрешения .
  • Вектор означает, что данные изображения описываются с использованием относительных математических координат. Чтобы позаимствовать слова Ли Доддса из этой ранней статьи на XML.com :

    Элемент <path>пример, взятый из спецификации: 

     <path d="M 100 100 L 140 100 L 120 140 z"/>

    Этот атрибут, заполненный буквами и цифрами, является координатами на холсте SVG, который аналогичен координатам в окне просмотра окна браузера. Команда M<path>dLzкраткое и приятное визуальное руководство по обозначению SVG-пути .

  • Наконец, Graphics означает, что она используется для создания изображений, но также означает, что она изначально поддерживает импорт и отображение растровых изображений и видео, используя свой <foreignObject> element Вы можете рассматривать эту функцию в схожих терминах как более привычные элементы <object><embed>

Зачем использовать SVG?

Хорошо, теперь, когда мы знаем, что такое SVG, почему все эти масштабируемые векторные вещи делают SVG таким крутым? Есть много причин, но я думаю, что три наиболее убедительных из них:

  • SVG очень хорошо подходит для поиска, поскольку изображения SVG на самом деле представляют собой просто интерпретируемые файлы XML (как веб-страницы интерпретируются как файлы HTML), а XML — это просто обычный текст. Если вы вспомните период расцвета «веб-сайта Flash», вы, несомненно, вспомните, каким был ночной кошмарный двоичный формат файлов Flash для поисковых систем, которые всегда предпочитали текст . Со временем вспышки развиты все виды специальных функций для болта на доступности для пауков поисковых систем и человеческих пользователей , так, но если SVG был доминирующим, что конкретная проблема будет уже спорный вопрос.
  • С самого начала SVG разрабатывался модульно, попирая философию дизайна своей «родительской» технологии XML. На практике это означает, что SVG обеспечивает относительно сильную мобильную поддержку, потому что она имеет несколько различных вариантов, которые могут взаимодействовать друг с другом. Это достигается путем определения профилей для поддержки низкоуровневых устройств с приемлемым качеством, при этом обеспечивая высококачественный контент. Знаете, как всегда предполагалось сделать в Интернете.
  • Если вы заботитесь о таких вещах (как и я), SVG был открытым стандартом задолго до Flash. Даже если вы не заботитесь об открытых стандартах, есть много других причин, по которым SVG важен для Интернета .

Как известно любому хорошему разработчику, когда вы размещаете высокоуровневые возможности поверх прочной основы, становится намного проще итеративно вводить улучшения по мере появления новых функций . Если вы позволите, SVG может стать тем «эффектным» эффектом.

Браузерная поддержка SVG

История поддержки SVG в значительной степени отражает разочаровывающую историю войн браузеров . Однако, к счастью, поддержка SVG в браузерах увеличивалась в течение длительного времени, и за последние пару лет она значительно возросла. Вот поддержка изображения в двух словах:

Если вам не нужно (и не хотите) заботиться об Internet Explorer, вам больше не о чем беспокоиться. Просто возьмите учебник по SVG и начните использовать опцию «Сохранить как SVG» в вашем любимом графическом приложении.

Тем не менее, в большинстве случаев вам нужно будет что-то сделать, чтобы взять с собой Internet Explorer. Так что вы можете сделать с IE сегодня? Вот с высоты птичьего полета варианты, которые вы должны иметь дело с разочаровывающим отсутствием поддержки IE:

  • Положитесь на согласование содержимого HTTP, чтобы использовать SVG для поддержки браузеров и растровые изображения для Internet Explorer. Хотя это работает надежно, похоже, что снова 1995, потому что вам все еще нужны две отдельные части контента, если только вы не строите одну динамически из другой. Это то, что Википедия делает сегодня.
  • Заставьте пользователей устанавливать плагины . У Adobe был один навсегда названный Adobe SVG Viewer . Это довольно хорошо, но был приговорен к концу жизни в 2007 году и, ну, это плагин. (Я не уверен, как Flash с легкостью стал плагином, но это не главное.)
  • Смирись и используй Flash на стороне клиента , но наслаждайся чистотой SVG для своих исходных файлов. Есть несколько попыток создать бесплатное программное обеспечение, которое использует данные пути SVG и передает их во Flash для рендеринга, но их все еще сложно использовать. Есть также коммерческий продукт под названием InputDraw .
  • Наконец, и, возможно, наиболее убедительно, используйте кросс-браузерный API . Просто так получилось, что довольно много из них бесплатны, с открытым исходным кодом и очень удобны:
    • SVG в Dojo Toolkit кажется надежным, и для тех, кто уже использует Dojo, это, вероятно, лучший выбор.
    • svgweb — экспериментальная библиотека Google. (По понятным причинам, сейчас он пользуется самой большой ажиотажем.)
    • RaphaëlJS , написанный Дмитрием Барановским, — мой любимый кросс-браузерный инструментарий SVG, о котором мы писали ранее в SitePoint . Поскольку это отдельная библиотека, вы можете смешивать и сочетать ее с вашей любимой платформой JavaScript. Другими словами, вы можете выбрать jQuery, YUI, Prototype или другой JavaScript-фреймворк и просто наложить поверх него вызовы RaphaëlJS для всей вашей работы, связанной с SVG.

Как работают SVG-пишущие фреймворки JS?

Для поддержки Internet Explorer и добавления интерактивности к Flash-подобным эффектам, которые SVG может дать вашему веб-сайту, вы почти наверняка захотите использовать фреймворк. Но как они работают? Это на самом деле удивительно просто, все благодаря более раннему языку векторной графики, который Microsoft разработал и до сих пор использует по сей день, из которого открытый стандарт SVG взял многие свои подсказки: VML или язык векторной разметки.

Поэтому JavaScript-фреймворки для SVG-написания придерживаются одной и той же парадигмы. Каждый из них по сути делает это:

  1. Предоставьте кросс-браузерный JavaScript API для написания SVG-команд (так же, как библиотеки для jQuery делают для манипулирования DOM).
  2. Запишите соответствующий язык векторной графики для узлов DOM на основе ваших команд (SVG для соответствующих браузеров, VML для Internet Explorer).
  3. Сделай тебе кофе. (Хорошо, хорошо, не совсем.)

Раскрути это

Как вы можете видеть, существует огромное количество информации и нет недостатка в инструментах, которые помогут вам использовать SVG прямо сейчас. Надеюсь, мы уже прошли переломный момент. Более того, число знающих людей, способных и желающих помочь вам реализовать решения в SVG, растет с каждым днем, и многие из них являются участниками собственных форумов SitePoint . Так что, располагая всеми этими ресурсами, выходите на улицу и начинайте наслаждаться возможностями!

33
Share: