1

я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.

1. Как правильно вставлять svg в html?

Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).
Знаю такие способы как:

  1. Вставить svg инлайново(просто вставить весь код svg в html).
  2. Если иконок больше одной, то отдельно и вставлять их в html где они используются.
  3. Вставлять с помощью object, iframe, embed.
  4. Собрать все иконки в спрайт и вытаскивать их с помощью use.

2. Где хранить спрайт?

В html или отдельным файлом спрайтом. Умею вытаскивать иконки из спрайта, если он весь лежит в html или даже если он лежит отдельным файлом.svg где-нибудь в картинках. Уметь то умею но как делать это. А если быть точнее, то где хранить спрайт чтобы не было проблем с кэшированием или какие там проблемы еще бывают…

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

3. Использовать внешние стили или писать их внутри svg?

Спасибо.

1

2 ответа 2

3

Как правильно, мне сказать сложно. Поэтому скажу как делаю я ).

Делаю несколько спрайтов, объединяя по какой-нибудь своей логике, и скидываю в /images/icons/.
Подключаю через use.

Вроде как это один способов, который позволяет кэширование.
Также позволяет использовать указание некоторых svg-параметров через css.

1

Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).

#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 здесь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.