Inline SVG vs Производительность файлов SVG

Ответ 1

Плюсы для inline:

• Меньше запросов HTTP;
• Вы можете использовать свойство css fill и изменить цвет;
• Svg является частью содержимого, поэтому он доступен для кликов, и вы можете вставлять текст;

Плюсы для отдельного файла:

• Файлы Svg могут быть кэшированы;
• В ваших файлах не отображается несколько строк релевантного кода;
• Если вам нужно изменить его позже, вы просто измените один файл;

Ответ 2

Встроенные SVG уменьшат количество HTTP-запросов, поэтому он будет быстрее загружать страницу при первом посещении. Но недостаток заключается в том, что ваши SVG файлы не будут кэшироваться в браузере, и поэтому их придется загружать каждый раз. Я бы сказал, если вы используете только несколько SVG (например, 10 или около того), включите их; но если у вас их много, перейдите с img + background-image.

Вы также можете рассмотреть использование определений SVG и использование тега SVG use для ссылки на определения SVG. Этот метод довольно хорош; особенно если вам нужно повторить SVG несколько раз на вашей странице. Дополнительная информация об этой технике: http://css-tricks.com/svg-sprites-use-better-icon-fonts/

Мое веб-приложение также может помочь вам легко определить эти SVG-определения и использовать пары.

Ответ 3

Claudiu Creanga, вы правы на большинстве, но не на последнем:)

Относительно файла SRC: "Если вам нужно изменить его позже, вы просто измените один файл;"

Файл может быть отдельным SVG как Inline. Просто включите XML/текстовый источник через PHP, например:

<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/img/icon-home.svg'); ?>

Я использую эту тактику, так как я рисую анимацию CSS3 на своих значках. Таким образом, у вас есть исходный файл ссылки для изменения в векторной программе, и простая загрузка будет исправлять все встроенные коды. Идентификатор объекта и пути внутри SVG не изменится, если вы просто перестроили или манипулировали ими.

Ответ 4

Универсального подхода нет. Это действительно зависит от многих вещей, но вот некоторые основные стратегии, которые можно использовать по отдельности или в сочетании.

Если у нас есть:

• Небольшое количество SVG с & lt; Размер файла 5k каждый - вставьте их в HTML. Сжатый gzip/brotli каждый будет около 1к. Любое небольшое число, умноженное на 1 КБ, лучше, чем такое же количество дополнительных запросов, независимо от того, кэшировано оно или нет.

• Огромное количество маленьких SVG & lt; 5k - сделать SVG-спрайт

• Любое количество больших SVG> 5k, и скажем, нам не нужно обращаться к свойствам SVG через CSS или JS. Тогда <img src="name.svg">

• Любое количество SVG, но нам нужно использовать CSS для изменения свойства SVG или, скажем, анимировать какое-либо свойство SVG. Единственный жизнеспособный вариант - встроенный svg.

• Если нам нужны SVG для фонов, но они & lt; чем 5 КБ каждый:

  .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); }

• Если нам нужны SVG для фонов, но они> 5 КБ каждый:

  .bg { background: url('images/file.svg'); }

• У меня никогда не было возможности попробовать SVG-спрайт в качестве фона, но это тоже вариант

Ответ 5

Вы получаете лучшее из обоих миров, если используете чистый CSS, потому что файлы CSS будут кэшироваться, например:

.my-image {
  background-image: data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"...
}

Однако это довольно неловко, если у вас нет препроцессора CSS, чтобы помочь.

С помощью SASS вы можете создавать вспомогательные функции для выполнения тяжелых работ, например:

@function inline-svg($w, $h, $contents) {
  @return url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="#{$w}" height="#{$h}">#{url-encode($contents)}</svg>');
}

.my-image{
  background-image: inline-svg(50, 50,
    '<g fill="#000" stroke="#fff">' +
        '<path ...' +
    '</g>');
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
}

Недостатком является то, что он ограничен фоновыми изображениями, но работать с ним довольно просто.