В настоящее время я создаю веб-сайт, предназначенный для современных браузеров и мобильных устройств. Что касается производительности, лучше ли встроить SVG непосредственно в HTML с помощью <svg>
или лучше использовать <img>
и/или фоновое изображение. Я запускаю gzip на сервере для дальнейшего сжатия моего контента и предпочитаю не полагаться на Javascript.
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;
}
Недостатком является то, что он ограничен фоновыми изображениями, но работать с ним довольно просто.