Как использовать формат svg как основное блюдо?

LADYX

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

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

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

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

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

1 ответ

LADYX

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

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

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

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

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

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

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

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

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

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

  • почему svg изображение обрезается?
  • почему не масштабируется?
  • почему svg иконки вообще не видно?
  • как иконку позиционировать?

licensed under cc by-sa 3.0 with attribution.