Когда вы создаете веб-сайт и добавляете изображения на этот сайт, один из самых важных моментов, который вы должны определить, – это какие форматы файлов являются правильными для использования. В зависимости от графики, один формат может быть намного лучше, чем другие.
Многим веб-дизайнерам удобен формат файла JPG, и этот формат идеально подходит для изображений с глубиной цвета, таких как фотографии. Хотя этот формат также будет работать для простой графики, такой как иллюстрированные значки, он не является лучшим форматом для использования в этом случае. Для этих иконок SVG будет лучшим выбором. Давайте посмотрим, почему именно:
SVG – векторная технология
Это означает, что это не растровая технология. Векторные изображения представляют собой комбинацию линий, созданных с использованием математики. Растровые файлы используют пиксели или крошечные квадраты цвета. Это одна из причин того, что SVG является масштабируемой и идеально подходит для адаптивных веб-сайтов, которые должны масштабироваться вместе с размером экрана устройства. Поскольку в мире математики существует векторная графика, для изменения размера вы просто меняете числа. Растровые файлы часто требуют значительного пересмотра, когда дело доходит до размеров. Если вы хотите увеличить векторное изображение, то здесь нет искажений, потому что система математична, а браузер просто пересчитывает эту математику и отображает линии, как всегда, гладкими. Когда вы увеличиваете растровое изображение, вы теряете его качество, и файл начинает размыться, когда вы начинаете видеть эти пиксели цвета. Математика расширяется и сжимается, пикселей нет. Если вы хотите, чтобы ваши изображения были независимыми от разрешения, SVG предоставит вам такую возможность.
SVG является текстовым
Когда вы используете графический редактор для создания изображения, программа делает снимок вашей законченной иллюстрации. SVG работает по-другому. Вы все еще можете использовать некоторые программы и чувствовать, что рисуете рисунок, но конечный продукт представляет собой набор векторных линий или даже слов (которые на самом деле являются просто векторами на странице). Поисковые системы смотрят на слова, в частности ключевые слова. Если вы загружаете JPG, вы ограничиваетесь названием вашей графики и, возможно, альтернативной текстовой фразой. Используя SVG-кодирование, вы расширяете возможности и создаете изображения, более удобные для поисковых систем.
SVG – это XML и работает в других языковых форматах
Это восходит к текстовому коду. Вы можете создать свое базовое изображение в SVG и использовать CSS для его полировки. Да, у вас может быть изображение, которое на самом деле является файлом SVG, но вы также можете кодировать SVG прямо на страницу и редактировать его в будущем. Вы можете изменить его с помощью CSS так же, как изменили бы текст страницы и т. Д. Это очень мощный инструмент, облегчающий редактирование.
SVG легко редактируется
Это, наверное, самое большое преимущество. Когда вы фотографируете квадрат, это то, что есть. Чтобы внести изменения, вы должны сбросить сцену и сделать новый снимок. Прежде чем вы это знаете, у вас есть 40 изображений квадратов, и вы до сих пор не совсем правильно поняли. С SVG, если вы допустили ошибку, измените координаты или слово в текстовом редакторе, и все готово. Я могу относиться к этому, потому что я нарисовал кружок SVG, который был расположен неправильно. Все, что мне нужно было сделать, это настроить координаты.
JPG изображения могут быть тяжелыми
Если вы хотите, чтобы ваше изображение увеличилось в физическом размере, оно также увеличится в размере файла. С SVG фунт по-прежнему фунт, независимо от того, насколько вы велики. Квадрат шириной 2 дюйма будет весить столько же, сколько квадрат шириной 100 дюймов. Размер файла не изменяется, что отлично с точки зрения производительности страницы!
Так что лучше?
Так какой формат лучше – SVG или JPG? Это зависит от самого изображения. Это все равно что спросить “что лучше, молоток или отвертка?” Это зависит от того, что вам нужно сделать! То же самое верно для этих форматов изображений. Если вам нужно показать фотографию, то JPG – лучший выбор для вас. Если вы добавляете значок, то SVG, вероятно, является лучшим выбором. Вы можете узнать больше о том, когда уместно использовать файлы SVG здесь.
Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирара 6/6/17
