Oc-windows.ru

IT Новости из мира ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как открыть SVG онлайн

SVG-спрайты

SVG-спрайты

В очередной раз, просматривая вакансии на HTML-верстальщика, на предмет поиска темы для новой статьи, в списке требований работодателя, наткнулся на пункт – использовать в верстке SVG-спрайты.

Нам, верстальщикам, не стоит игнорировать требование работодателей, а идти в ногу с современными приёмами в верстке. Что по отдельности обозначают эти модные термины?

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

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

Почему SVG-спрайты – это хорошо?

Почему они так нравятся работодателям и заказчикам? Все дело в скорости загрузки сайта: чем меньше HTTP-запросов к серверу, тем быстрее работает сайт. Чем быстрее работает сайт, тем больше его любят поисковые системы и посетители.

Используя на сайте SVG-спрайты, вы убиваете сразу двух зайцев – получаете меньший вес у графики (SVG формат в разы легче, чем PNG и JPG) и меньше запросов к серверу.

В этом коде целых три HTTP-запроса, на больших экранах появится замыливание и весят иконки в PNG формате больше:

<img src=»icons/pinterest.png» alt=»»>
<img src=»icons/twitter.png» alt=»»>
<img src=»icons/facebook.png» alt=»»>

А здесь один запрос, при масштабирование векторная графика не теряет в качестве и меньше весит.

Как сделать SVG-спрайт?

  1. Скачиваем на сайте flaticon две иконки pinterest + github, в формате SVG. Теперь нужно два SVG-файла объединить в один.
  2. В редакторе кода создадим sprite.svg и пропишем следующий код.
    <svg display=»none» >
    <symbol viewBox=»0 0 455.731 455.731″>
    <g>
    <path ..здесь код отрисовки pinterest../>
    </g>
    </symbol>
    <symbol viewBox=»0 0 512 512″>
    <g>
    <path ..здесь код отрисовки github../>
    </g>
    </symbol>
    </svg>
  3. Значения атрибутов viewBox, копируем из pinterest.svg и github.svg.
  4. Открываем содержимое двух скачанных файлов и копируем внушительный код отрисовки иконки, тега path и вставляем между тегами <g></g>. Мы вынесли код иконок в отдельный файл sprite.svg.

Теперь, через CSS стили мы можем задавать иконкам любой цвет, размер, а также менять им цвет при наведении. Не стоит паниковать, если иконки не отображаются в Chrome на вашем компьютере, откройте другим браузером или загрузите страницу на сервер.

SVG-спрайты vs иконочных шрифтов

Чем SVG-спрайты лучше иконочных шрифтов, ведь все иконки можно упаковать в один файл и загружать с одним HTTP-запросом? Перечислим некоторые преимущества:

  • проще управлять позиционированием
  • удобнее делать многоцветные иконки
  • можно делать анимированные иконки

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами и начиная с
IE 11+.

5 Best Free Online SVG Viewers

Here are 5 best free online SVG viewers. Whenever you want to view a Scalable Vector Graphics file online, this list of best free SVG viewer websites will come in handy. All you have to do is add an SVG file from PC using any of these websites and then you can view that file.

Some of these free SVG viewer websites also let you view and edit the SVG file code. As a result, you can generate a separate SVG file with changes of your choices. Some unique features are also available in some of these free websites. For example, you can view and edit SVG file, convert SVG to PNG, generate a new SVG file, etc.

So, let’s check these free online SVG viewers one by one.

SVG viewer/editor

SVG viewer editor interface

SVG viewer/editor (Homepage) is one of the best websites on this list. I like this website because of simple interface and valuable features. Apart from viewing SVG file online, this website also helps you view the code of that SVG file as well as edit that code. You can also preview the output SVG after editing the code and then save it as a new SVG file on your PC.

One more feature of this website is you can create a new SVG file by entering the code manually, preview the output, and save the code as SVG file. So, pretty good features are present in this online SVG viewer. Therefore, I like it very much.

FreeCodeFormat

FreeCodeFormat

FreeCodeFormat has features similar to SVG viewer/editor (mentioned above). It also lets you view SVG file stored on your PC and view its code on the same page. The code is visible on the top part and the bottom part shows the SVG file.

You can also edit the SVG file code and click on Draw button to preview the output SVG file. After that, you can click on the Save button and get the output SVG to your PC. I like all these features and therefore it is simply a good choice to view SVG online.

Draw SVG

Draw SVG

Draw SVG is an online SVG viewer as well as editor. It has many tools for editing the SVG file, which make it a very useful SVG viewer and editor. Once you have added an SVG file on its interface, you can move points available in SVG file, resize and rotate them, add the hyperlink, and delete any point.

Читать еще:  Как выключить ноутбук, если он завис

You can also add images, map, lines, rectangle, use shape art, and other tools. Finally, you can save all the changes as a new SVG file. One more feature that I like is you can also export SVG as PNG. All features are pretty good. So, if you are looking for online SVG viewer and editor, then this website is definitely a very good option.

Method Draw

Method Draw

Method Draw is also a useful SVG viewer and editor website. It has some simple tools to edit the SVG file. You can use pencil, line, square, ellipse, path, shapes, text, zoom, and eyedropper tools. After editing, you can save the output as a separate SVG file. The feature to export SVG as PNG is also present on this website.

Apart from these features, you can use some other options also. For example, you can show/hide ruler, wireframe, grid, and code of SVG file. So, the list of features is quite good. Therefore, this online SVG viewer and editor have easily managed to reserve its place in this list.

You may also check the full review here.

rollMyFile

rollMyFile

rollMyFile is a good competitor to rest of the SVG viewer websites available in this list. It is a universal file opener website and supports 200+ file formats. Opening an SVG file is also possible using this website. Simply open its homepage, drag and drop an SVG file from PC or use choose button. After that, it will help you view that file in a separate pop-up window.

This website doesn’t come with its own SVG viewer feature. Instead, it automatically finds the suitable program to view the input file. And the same thing applies to view SVG files. While testing this website, it opened SVG viewer with the help of Inkscape software. The best part is I didn’t have to install that software to view the SVG file. It simply brought the web version of that program and helped me view the SVG file.

Google Chrome

view svg files on google chrome

Here is a bonus for you. Google Chrome is a very popular browser and my favorite also. Viewing SVG file is also possible using this browser. I will say this is probably the most suitable option if you have to view some SVG file and Chrome is your default browser. The best part is you can view SVG files using Chrome browser even in offline mode as you just have to add SVG from PC to this browser.

Like Google Chrome, Microsoft Edge and Firefox browsers are also helpful to view SVG files. Simply drag n drop an SVG file on the new tab of Chrome or some other preferred browser and then you can view the SVG file.

The Conclusion:

Here I wrap up the list of best free online SVG viewers. All are good in delivering the output. But, I like SVG viewer/editor website the most. The reason is it has a user-friendly interface, lets you view and edit the source code of SVG file, create a new SVG file, and save a separate SVG file with added changes.

SVG – Файл масштабируемой векторной графики (Scalable Vector Graphics File)

В Windows: Adobe Illustrator CC, Adobe Flash Player, Adobe Flash Professional CC, Adobe InDesign CC, Microsoft Visio, CorelDRAW Graphics Suite X, Corel PaintShop Pro X, GIMP, Serif DrawPlus, Inkscape, CADSoftTools ABViewer, Blender, SVG Viewer Extension, Любой вэб-браузер
В Mac OS: Adobe Illustrator CC, Adobe Flash Player, Adobe Flash Professional CC, Adobe InDesign CC, Inkscape, GIMP, Любой вэб-браузер
В Linux: GIMP, Kolourpaint, Inkscape, sK1, librsvg, Любой вэб-браузер
Кроссплатформенное ПО: Embroidermodder, SVG-Edit

Описание расширения SVG

Популярность: Часто используется

Разработчик: World Wide Wide Consortium

Расширение SVG (от англ. Scalable Vector Graphics) используется в основном для изображения в векторном формате и является открытым форматом. .SVG основан на языке разметки XML, и был разработан в качестве открытого стандарта Консорциумом Всемирной паутины (World Wide Wide Consortium). Формат SVG используется как для статической, так и для анимированной графике.

Некоторые из ключевых особенностей формата SVG являются:

• Поддерживает гиперссылки («XLinks»)
• Поддержка векторных фигур (например, линий, кривых и т.д.)
• Поддерживает растровые объекты
• Поддержка текста
• Поддержка манипуляций и комбинаций объектов, включая группировку, преобразования и сценариев на основе событий

Основываясь на XML (который является по существу текстовым форматом), изображения SVG хорошо сжимаются. Формат SVGZ – модицифированный формат SVG, который использует сжатие GZIP и таким образом решается проблема с большим размером SVG файла.

Есть несколько версий формата SVG, которые сейчас используются, (SVG 1.0, SVG 1.1 и SVG Tiny 1.2 на момент написания статьи). В частности, SVG Tiny (SVGT) и SVG Basic (SVGB) являются подмножествами полного стандарта SVG в основном предназначенные для использования на устройстве с ограниченными возможностями, такие как мобильные телефоны или КПК. Кроме того, следует отметить, что поддержка браузера для SVG оказалась неполной – в настоящее время в большом количестве браузеров, в том числе Internet Explorer, необходим дополнительный плагин (что многие пользователи не будут иметь) для отображения SVG изображения.

Читать еще:  Скачать программу Revo Uninstaller 3.2.1 бесплатно

MIME тип: image/svg-xml, image/svg+xml, image/vnd.adobe.svg+xml
HEX код: 3C

Другие программы, связанные с расширением SVG

    Сохраненный файл игры
    Расширение SVG – это сохраненный файл игры, который создается различными играми, в том числе Quake III: Team Arena, Return to Castle Wolfenstein, Call of Duty 4 и Grand Theft Auto 2 (GTA2). Игрок сохраняет свою игру и потом можно будет возобновить ее. Очень часто используется автосохранение, таким образом игроку даже не приходится самому сохранять данные игры.

Поскольку различные игры используют разные форматы SVG файлов, вы можете попробовать несколько программ, прежде чем сможете открыть их. Например, сохраненные SVG файлы от игры GTA2 можно редактировать в специальном редакторе GTA2 Saved Game Editor, но в этом редакторе нельзя редактировать SVG-файлы, созданные в Quake III: Team Arena.

ПРИМЕЧАНИЕ: Если вы не знаете программу, которая открывает или редактирует SVG файлы, попробуйте открыть свой ​​SVG файл в текстовом редакторе, например в Блокноте.

Добавление векторной графики в веб-документ

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

Навыки:Знание основ HTML и умение добавлять изображение в веб-документ.
Цель:Изучить как встроить SVG (векторное) изображение на веб-страницу.

Примечание: Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.

Что такое векторная графика?

В веб-разработке вы будете сталкиваться с двумя типами изображений — растровым и векторным:

  • Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
  • Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое — SVG.

Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны «кирпичики». Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним.

Two star images

Two star images zoomed in, one crisp and the other blurry

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !

Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.

Что такое SVG?

SVG это язык на базе XML для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как <circle> (круг) и <rect> (прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <animate> (анимация частей вашего векторного изображения) и <mask> (en-US) (применение маски к изображению.)

В качестве простого примера, следующий код создаёт круг и прямоугольник:

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

Дополнительные преимущества SVG:

  • Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
  • SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:

  • SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
  • SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
  • не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.

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

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

Добавление SVG на страницы

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

Быстрый путь: <img>

Чтобы встроить SVG используя элемент <img> , вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.

Читать еще:  Не запускается Metro Exodus на Windows 7
Плюсы
  • Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt
  • Вы можете легко превратить изображение в гиперссылку, поместив <image> в элемент <a> .
Минусы
  • Вы не можете изменять изображение с помощью JavaScript.
  • Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
  • Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus ).

Устранение неполадок и кросс-браузерная поддержка

Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать srcset атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами — старые же браузеры будут загружать PNG:

Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:

Подобно методу <img> , описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.

Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.

Как включить SVG в ваш HTML код

Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:

Плюсы
  • Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
  • Вы можете присваивать class -ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
  • SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus ) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
  • Вы можете разметить SVG как гиперссылку, обернув в элемент <a> .
Минусы
  • Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
  • Дополнительный SVG код увеличивает размер вашего HTML файла.
  • Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения .
  • Вы можете добавить альтернативный вариант в элементе <foreignObject> , но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).

Как встраивать SVG при помощи <iframe> (en-US)

Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.

Вот краткий обзор:

Это — определённо не самый лучший метод для выбора:

Минусы
  • Как вы можете видеть, у iframe -ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe -ы.
  • Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.

Активное изучение: поиграйте с SVG

В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.

Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку Reset.

Заключение

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

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

Ссылка на основную публикацию
Adblock
detector
×
×