Знаю несколько способов а какой будет правильный что бы потом не было
ни вопросов, ни проблем с той, же интерактивностью (анимацией если
придется анимировать).
#1. object
Лучший способ, чтобы реализовать анимацию, интерактивность, стилизацию, масштабирование это:
<object type="image/svg+xml" data="image.svg" width="200" height="200" ></object>
Этим способом можно добавлять как один файл SVG, так и несколько иконок, объединенных в спрайт. Этой теме посвящен раздел с меткой - svg-спрайт
Вот лучшее, на мой взгляд, руководство по созданию спрайтов
#2. Инлайн добавление кода SVG в HTML
Если иконок немного и код svg компактный, то вполне допустим этот способ для реализации анимации и всего остального:
Ниже код анимации шестеренок с кнопками пуска и остановки вращения.
<svg width="200" height="200" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<g id="coleso">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: grey; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: grey; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<g id="coleso2" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
<g transform = "translate(30,50)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
#3. Использование <iframe>
тега.
<iframe src="SvgImg.svg"></iframe>
Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов <iframe>
.
Это может быть хорошим методом, если вы хотите полностью отделить SVG
код и скрипт на вашей главной странице. Однако манипуляции SVG
изображениями с главной страницы при помощи JavaScript будут немного
сложнее.
#4. Другие способы добавления SVG, которые делают анимацию, стилизацию невозможной
<img src="image.svg" width="200" height="200" alt="image description">
Можно, как обычно для любого другого изображения задать ширину, высоту.
По соображениям безопасности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE10
,Edge
, Safari
, Chrome
не принимают стили, если они определены в отдельном файле таблицы стилей.
Для покраски изображений остается только один способ: фильтры SVG и CSS
Ниже примеры изменения цвета при наведении:
<style>
img:not(:hover) {
transition: 2s;
filter: saturate(0%);
-webkit-filter: saturate(0%);
}
img:hover {
transition: 1s;
}
</style>
<img width=200 src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
<style>
.img:hover{
filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
-webkit-filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}
</style>
<img class="img" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" width="300" height="300" >
О других способах добавления SVG в HTML здесь