Следует ли использовать <img>
, <object>
, или <embed>
для загрузки SVG файлов на страницу, аналогично загрузке jpg
, gif
или png
?
Каков код для каждого из них, чтобы он работал как можно лучше? (В своих исследованиях я встречал ссылки на включение mimetype или указание на запасные SVG-рендереры, но не видел хорошего современного руководства).
Предположим, что я проверяю поддержку SVG с помощью Modernizr и отступаю назад (возможно, заменяя на обычный тег <img>
) для браузеров, не поддерживающих SVG.
Я могу порекомендовать SVG Primer (опубликованный W3C), который охватывает эту тему: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.
Если вы используете <object>
, то вы получаете растровый откат бесплатно*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Ну, не совсем бесплатно, потому что некоторые браузеры загружают оба ресурса, см. предложение Larry' ниже о том, как это обойти.
2014 обновление:
<img>
со скриптовыми возвратами
к версии png (для старых IE и android < 3). Один чистый и простой
способ сделать это:<img src="your.svg" onerror="this.src='your.png'">
.
Это будет вести себя как GIF-изображение, и если ваш браузер поддерживает декларативные анимации (SMIL), то они будут воспроизводиться.
Если вам нужен интерактивный svg, используйте <iframe>
или <object>
.
Если вам нужно предоставить старым браузерам возможность использовать svg-плагин, используйте <embed>
.
Для svg в css background-image
и подобных свойствах, modernizr - один из вариантов переключения на обратные изображения, другой - зависимость от нескольких фонов, чтобы делать это автоматически:
div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
Примечание: стратегия множественных фонов не работает на Android 2.3, потому что он поддерживает множественные фоны, но не svg..
Еще одно хорошее чтение - этот пост в блоге об отступлении svg.
В IE9 и выше вы можете использовать SVG в обычном теге IMG.
<img src="/static/image.svg">
<object>
и <embed>
обладают интересным свойством: они позволяют получить ссылку на SVG документ из внешнего документа (с учетом политики same-origin). Эта ссылка может быть использована для анимации SVG, изменения его таблиц стилей и т.д.
Дано
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
Затем вы можете делать такие вещи, как
document.getElementById("svg1").addEventListener("load", function() {
var doc = this.getSVGDocument();
var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
rect.setAttribute("fill", "green");
});
Лучшим вариантом является использование SVG изображений на различных устройствах :)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
Элемент srcset # использовать ``
Большинство современных браузеров сейчас поддерживают этот `элемент srcset атрибут]1, который позволяет задать разные образы для разных пользователей. Например, вы можете использовать его для 1X и 2x плотность пикселей, и браузер выбрать правильный файл.
В этом случае, если вы укажите СВГ в элемент srcset и браузер не'т это'МР откат на источник
.
<img src="logo.png" srcset="logo.svg" alt="My logo">
Этот метод имеет несколько преимуществ по сравнению с другими решениями:
Если вы используете &ЛТ;ИМГ&ГТ; теги, затем в WebKit браузерах, основанных выиграл't дисплей внедренные растровые изображения.
<дель>если вы используете встроенный SVG's, то проводник выиграл'т изменение размера СВГ по вашей CSS.</дель> <ины>проводник будет изменять СВГ правильно, но вы должны указать высоту и ширину.<ины>
<дель>я обнаружил, что &ЛТ;объект&ГТ; тег только один, который работает во всех браузерах. Пришлось менять ширину и высоту (внутри СВГ) до 100% для того чтобы получить его, чтобы правильно изменить размер.</дель>
Вы можете добавить функция onclick, onmouseover модели и т. д. внутри СВГ, в любой форме в SVG: onmouseover модели="и сверху.myfunction в консоли(ЭВТ);"и
Вы также можете использовать шрифты в SVG, включив их в ваш обычный стиль.
Примечание: при экспорте в SVG's из иллюстратора, имена веб-шрифт будет неправильно. Вы можете исправить это в ваш CSS и избежать возиться в СВГ. Например, иллюстратор выдает неправильное имя на Arial, и вы можете исправить это, как это:
@font-face {
font-family: 'ArialMT';
src:
local('Arial'),
local('Arial MT'),
local('Arial Regular');
font-weight: normal;
font-style: normal;
}
Все это работает на любой браузер, выпущенный в течение последних двух лет.
Результаты в ozake.com (на французском языке). Весь сайт состоит из СВГ'ов, за исключением контактную форму.
Предупреждение: веб-шрифты точно не изменится, а если у вас много переходов из обычного текста на полужирный или курсив, может быть небольшое количество лишних или недостающий пробел в точках перехода. Смотрите мой ответ на этот вопрос для получения дополнительной информации.
Если вам нужен ваш Свгс полностью styleable с CSS они должны быть встроенные в дом. Это может быть достигнуто путем инъекции СВГ, который использует JavaScript, чтобы заменить HTML-элемент (обычно <ИМГ>
элемент) с содержимым SVG-файла после загрузки страницы.
Вот минимальный пример, используя SVGInject:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
После того, как изображение загружено на события onload="и SVGInject(это)
вызовет впрыска и <ИМГ>
элемент будут заменены на содержимое файла, указанного в атрибуте источник
. Это работает со всеми браузерами, которые поддерживают формат SVG.
Disclaimer: я соавтор SVGInject
Я бы лично использовать <СВГ и GT; тег, потому что если вы делаете вы **полный контроль над ним**. Если вы используете его в
<ИМГ>` вы Don'т получить, чтобы контролировать внутренностей SVG с помощью CSS и т. д.
другое дело, поддержка браузеров.
Просто откройте ваш файл в формате SVG и вставить его прямо в шаблон.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
<g id="layer101">
<path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
<path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
<path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
<path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
</g>
</svg>
тогда в CSS можно просто например:
svg {
fill: red;
}
Некоторый ресурс: советы СВГ
Мои пять копеек: к 2019 году, 93% браузеров (и 100% в последних двух версий каждой из них) могут обрабатывать SVG в <элементы img>
:
Источник: Можно Использовать
Так что мы бы сказать, что там's нет причин, чтобы использовать в <объект>
больше.
Но он's по-прежнему имеет свою плюсы:
При осмотре (например, с помощью инструментов разработчика Chrome) вам будет представлен весь разметки SVG в случае, если вы хотели подделать немного с ним и видеть изменения.
Это обеспечивает весьма надежный запасной вариант на случай, если Ваш браузер не поддерживает Свгс (подождать, но каждый из них делает!) что также работает, если СВГ это'т нашли. Это был ключевой особенностью XHTML2 Spec, которая, как бетамакс или HD-DVD дисков.
Но в минусы:
<Объект> У
(хотя это'ы совершенно безопасно использовать его в <амп-ИМГ>
и использовать его встроенный тоже.Нашел одно решение на чистом CSS и без двойной загрузки изображения. Это не так красиво, как я хочу, но это работает.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<style type="text/css">
.nicolas_cage {
background: url('nicolas_cage.jpg');
width: 20px;
height: 15px;
}
.fallback {
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<style>
<![CDATA[
.fallback { background: none; background-image: none; display: none; }
]]>
</style>
</svg>
<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<switch>
<circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
<foreignObject>
<div class="nicolas_cage fallback"></div>
</foreignObject>
</switch>
</svg>
<hr/>
<!-- external svg -->
<object type="image/svg+xml" data="circle_orange.svg">
<div class="nicolas_cage fallback"></div>
</object>
</body>
</html>
Идея в том, чтобы вставить специальные СВГ с типом возврата.
Более подробную информацию и процесс тестирования можно найти в мой блог.
Эта функция jQuery и фиксирует все ошибки в SVG изображений и заменяет расширение файла с другим расширением
Пожалуйста, откройте консоль, чтобы увидеть ошибка при загрузке изображения SVG
в
(function($){
$('img').on('error', function(){
var image = $(this).attr('src');
if ( /(\.svg)$/i.test( image )) {
$(this).attr('src', image.replace('.svg', '.png'));
}
})
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/embedded/result,js,html,css/">
в
Я рекомендую использовать сочетание
<панели viewBox СВГ=" не то" ширина" и&;" Высота=" и" и> <путь=" и#хххххх на" ДД"и М203.3,71.6 с-.........." и>< и> </СВГ>