Я много говорил о SVG в последнее время. Честно говоря, есть много интересного, если вы дизайнер, разработчик игр, пользовательский интерфейс или аниматор.
Игровые персонажи разработаны в анимации SVG.
Инструменты становятся действительно хорошими. На верхнем уровне инструментов дизайна Adobe Illustrator перешел от смущения к спагетти-коду к по-настоящему впечатляющей доле экспорта SVG примерно через 2 года.
Инструменты меньшего масштаба, такие как Boxy SVG, предлагают отличные альтернативы без затрат цента.
Браузеры тоже неплохо играют. Аудитория варьируется от сайта к сайту, но в 2016 году мы можем положиться на то, что большинство наших пользователей смогут увидеть, как наши SVG визуализируются должным образом.
Поэтому вопрос для меня таков: кроме нескольких наборов иконок и одного или двух логотипов — почему мы не видим, чтобы SVG чаще использовались в Интернете?
Слон в комнате: SVG Image Hosting
Как вы получаете свой SVG онлайн, где люди могут видеть его?
Сначала это звучит глупо. Вы создали эту классную векторную графику. Разве вы не можете просто загрузить его как JPG, GIF или PNG?
Да и нет.
По умолчанию большинство онлайн-сервисов блокируют загрузку файлов SVG. Попробуйте загрузить SVG в стандартную версию WordPress, и вы получите сообщение « Illegal file type Мне удалось заставить нашего системного администратора изменить нашу установку SitePoint WordPress, чтобы разрешить загрузку SVG, но это может быть не вариант для всех.
Аналогичным образом, Facebook, Twitter, Behance, Tumblr и Blogger блокируют любые попытки загрузки SVG.
Итак, как насчет загрузки вашего SVG в один из сервисов хостинга больших изображений?
Нет кости. К сожалению, вы не получите никакой любви от Flickr , Photobucket , Imgur , Google Photos или любого другого признанного сервиса, который я смог найти.
Если вы системный администратор или типичный программист, это, вероятно, не большая проблема для вас. Возможно, у вас есть доступ к веб-серверу, которым вы управляете.
Но если вы дизайнер, аниматор или иллюстратор, это может стать серьезным ограничителем шоу. Вопросы о StackExchange, относящиеся к 2013 году, встречаются в основном пожиманием плечами. В прошлом году на форумах SitePoint Ральф предложил включить SVG в качестве dataURI , что является хорошим вариантом, особенно для компактной графики меньшего размера.
Но это может быть немного громоздким для карт, инфографики и больших изображений.
Почему страх перед планетой SVG?
Вероятно, есть ответ из двух частей на этот вопрос.
Во-первых, хотя SVG не является новой идеей — спецификация W3C была написана в 1998 году, — поддержка SVG является своего рода новой. Это означает, что создание службы, поддерживающей загрузку SVG, до недавнего времени было бы пустой тратой времени.
Во-вторых, есть несколько дополнительных вопросов безопасности, с которыми нужно бороться. Поскольку SVG является форматом текстового файла, на 100% законно встраивать в файл живой JavaScript. Это делает SVG мощным, но также и открытым для манипуляций злыми силами.
На данный момент никто не хочет брать на себя ответственность за принятие такого риска. Многие приложения, в том числе WordPress, Tumblr, Behance и Blogger, с радостью отобразят SVG на вашей странице. Они просто не позволят вам загрузить его. Это как встраивание видео на Youtube.
Итак, как вы можете разместить мой SVG онлайн?
Несмотря на то, что в настоящее время нет простых сервисов SVG для перетаскивания, я нашел полезный пробел.
Github & SVG: получить суть
Итак, половина из вас, читая это, вероятно, подумала: « И что? Я использую Github каждый день ». Если вы находитесь в этом лагере, перейдите к разделу с практическими рекомендациями ниже.
Другая половина, вероятно, думала: « Что? Эта странная, непроницаемая, «коварная» вещь, которую используют разработчики? Я ни за что не использую это!
Конечно, если вы не используете его, Github выглядит одинаково запутанно и скучно. Тем не менее, это, пожалуй, наш лучший способ размещения SVG в Интернете, и для его использования нам нужно только самое базовое понимание.
Большая часть активности на Github происходит в репозиториях кода или в «репозиториях» — многопользовательских библиотеках с управлением версиями, содержащих весь код в проекте. В них могут храниться тысячи файлов и сотни пользователей.
Но у Github также есть вещь, называемая «Gists». Gists предназначены для обмена небольшими примерами кода, что вам нравится. Если вы создаете бесплатную учетную запись Github, вы можете добавлять новые списки в свою учетную запись в любое время. Они на 100% бесплатны.
Интересная вещь о гистах в том, что нам даже не нужно входить в систему, чтобы их создать. Если вы откроете эту страницу , вставите какой-нибудь текст, дадите ему имя файла и нажмете « Add file
Конечно, вероятно, легче отслеживать ваши файлы, если вы просто создаете бесплатную учетную запись GitHub с самого начала, но вам не нужно это пробовать.
Как разместить свой SVG в GitHub Gist
1). Скопируйте код SVG
Если вы создаете SVG в Illustrator, Boxy, SVG, Sketch или любом другом редакторе, нам нужен прямой доступ к коду. Откройте файл SVG в предпочитаемом вами редакторе кода (скобки, Atom, Sublime и т. Д.) И скопируйте весь файл SVG в буфер обмена.
2). Создать новый гист
Затем создайте новую суть , вставьте свой SVG-код, присвойте ему имя файла (т.е. «my-file.svg») и нажмите «Добавить файл».
Gist, содержащий ваш SVG-код
После сохранения вы должны увидеть что-то вроде скриншота выше. Нажатие на кнопку «Изменить» в правом верхнем углу дает вам постоянный доступ к редактированию / обновлению / вставке файла снова в любое время.
Итак, у нас есть наш файл онлайн, но мы не можем просто «горячо связать» этот файл изображения. Нам нужно правильно обслужить его, иначе он не будет восприниматься как изображение.
3). Получить сырой URL
На правой стороне рамки выше, вы увидите кнопку « Raw ». Нажмите эту кнопку, и вы увидите сырой дамп вашего исходного файла SVG.
Все, что нам нужно, это URL в адресной строке вашего браузера — скопируйте его в буфер обмена.
4). Служите этому URL через RawGit
Наконец, перейдите на RawGit.com и вставьте свой URL-адрес в большое текстовое поле. Если вы все сделали правильно, поле мгновенно станет зеленого цвета, и ниже вы увидите два новых URL, готовых для использования — один URL для производственного использования, другой для разработки.
Rawgit: дает вам готовый URL для вашего SVG-изображения.
Мой Gist-хостинг SVG
С тем же успехом вы можете просто и просто использовать производственный URL. Если вы вставите любой из этих URL-адресов в адресную строку браузера, вы должны увидеть визуализацию SVG.
Это буквально все, что делает RawGit.
Вот ссылка RawGit на файл SVG, который я использовал выше .
И этот файл используется в качестве связанного изображения здесь:
Еще один маленький скрытый бонус? Ваше изображение теперь также «управляется источником». Перейдите по ссылке «Редакции» на странице своей страницы, и вы увидите все более ранние итерации рисунка SVG.
Зачем беспокоиться?
Этот совет может показаться немного сухим, техническим и «кодовым», но он открывает множество возможностей для умных дизайнеров. Например:
- Вы можете связать свои новые SVG в большую демонстрацию Codepen. Я разрабатывал игровую графику HTML5 таким образом .
- Вы можете создать карту путешествий в SVG и обновлять ее в прямом эфире во время путешествия — нет необходимости каждый раз экспортировать и загружать копию.
- Вы можете создать карту предвыборного прогнозирования и обновлять действующий документ по мере появления новых данных.
- Вы можете создать карту предвыборного прогнозирования и обновлять действующий документ по мере появления новых данных.
SVG действительно предлагает нам гораздо лучшие способы сделать то, для чего мы в настоящее время используем PNG и JPG.
Я надеюсь, что Гистс даст вам надежный способ раскрыть эту творческую силу в других местах.
Первоначально опубликовано в бюллетене SitePoint Design .