3

Добрый день! Много уже читал про формат svg, но так и не совсем понял, как лучше выполнить svg спрайты. У меня возникли следующие вопросы.

Нужно ли сейчас дублировать спрайты в формате png для тех браузеров, которые не понимают svg?

И второй вопрос: если, допустим, на сайте используется иконка размером 50х50 пикселей (используем ее как фоновый рисунок), мы ее добавляем в спрайт в этом размере в формате png, и в этом же размере нам нужно ее добавлять в спрайт в формате svg, и при увеличении она будет смотреться четко? Правильно я понимаю?

И тут же рождается у меня еще один вопрос: такие иконки, как лупа, гамбургер, крестик, различные стрелки - и все же в каком формате их лучше выполнять, в svg и css?

Одним словом, я себе таким образом усложнил жизнь. Может быть, конечно, вопросы глупые, но хоть убейте, прочитав различные статьи (кстати почему-то как ни открою, так они обязательно несколько летней давности) про формат svg, так и не сложил у себя в голове окончательно картинку, как все же правильно использовать этот формат. Не пинайте, не отправляйте читать матчасть, а дайте здесь дельные советы. Буду очень благодарен!

andreymal
  • 13,178
Sevastopol'
  • 28,195

1 Answers1

4

Нужно ли сейчас дублировать спрайты в формате png для тех браузеров, которые не понимают svg?

В основном не нужно дублировать спрайты форматом png, так как даже IE начал понимать svg, кроме анимации. Но в этом случае, тем более не выручит png :-)

И тут же рождается у меня еще один вопрос: такие иконки, как лупа, гамбургер, крестик, различные стрелки - и все же в каком формате их лучше выполнять, в svg и css?

Это остается на ваш выбор, как лучше у вас получается, так и делайте.

  • Svg иконки по определению весят меньше, чем иконки png.
  • Svg масштабируется без потери качества, а png нет.
  • Но, чтобы работать с SVG необходимо понимать этот формат, иначе будет много вопросов типа: почему не масштабируется, почему иконки svg не стилизуются и т.д и т.п

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

Как заставить масштабироваться квадраты-svg?

Как выбирать и дорабатывать изображения SVG

Как взаимодействуют между собой viewport и viewBox

Последняя ссылка - это фундамент для понимания SVG
При понимании этих основ исчезнут вопросы типа:

  • почему svg изображение обрезается?
  • почему не масштабируется?
  • почему svg иконки вообще не видно?
  • как иконку позиционировать?
Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • 1
    @ с появлением современных гаджетов SVG переживает вторую молодость. На мой взгляд интерфейс веб страничек должен быть целиком векторным, а растр должен остаться только для картинок. Если вам мой ответ помог, отметьте его пожалуйста галочкой – Alexandr_TT Apr 27 '17 at 08:57
  • 1
    @LADYX кстати не обращайте внимание на дату статей о SVG. так как Svg, не менялся с 2001 года, правда были незначительные изменения в 2008 году - вышла версия 1.1 Версия SVG2 только готовится к выпуску и уже так много лет. Поэтому все статьи, за любую дату, практически актуальны – Alexandr_TT Apr 27 '17 at 09:14