Background svg image css: How to add SVGs with CSS (background-image)

SVG в фоновом режиме CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

SVG в фонах CSS

— CR

• Глобальное использование

  98,67% + 1,2% знак равно 99,87%

Метод использования изображений SVG в качестве фона CSS

Chrome

1. 4: Частичная поддержка
2. 5 — 107: Поддерживается
3. 108: Поддерживается
4. 109 — 111: Поддерживается

Edge

1. 12 — 15: частичная поддержка
2. 16 — 106: Поддержка.

Safari

1. 00% — Not supported»> 3.1: Not supported
2. 3.2 — 4: Partial support
3. 5 — 16.0: Supported
4. 16.1: Supported
5. 16.2 — TP: Supported

Firefox

1. 2 — 3.6: Not supported
2. 4 — 23: Частичная поддержка
3. 24 — 106: Поддерживается
4. 107: Поддерживается
5. 108 — 109: Поддерживается

Opera

1. 9: не поддерживается
2. 9.5-
9005 9005 9005 9005 9005 9005 9005 9005:

IE

1. 07% — Not supported»> 5,5 — 8: не поддерживается
2. 9 — 10: Поддерживается
3. 11: Поддерживается

Chrome For Android

1. 107: поддержал

SAFRIARI

1. 107: поддержал

SAFRIARI

: 70015

.0022 3.2 — 4.1: Частичная поддержка

4.2 — 16,0: Поддерживается

16.1: Поддерживается

Samsung Internet

1. 4 — 18,0: поддерживается
2. 19.0: поддержан

.

Opera Mobile

1. 00% — Partial support»> 10–12.1: Частичная поддержка
2. 72: Поддерживается

Браузер UC для Android

1. 13.4: Поддерживается 90910 Браузер для Android 15
2. 0021
3. 2.1 — 2.3: Not supported
4. 3 — 4.4.4: Supported
5. 107: Supported

Firefox for Android

1. 106: Supported

QQ Browser

1. 13.1: Supported

Baidu Browser

1. 13.18: Поддержано

KAIOS Browser

1. 2.5: Поддержано

Ресурсы:

Учебное пособие для Advanced Effect

.

Инсайон.0001

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

• Как фоновое изображение в CSS
• Внутри элемента изображения
• Как встроенный файл
• Дополнительные ресурсы

Как фоновое изображение в CSS

Вы можете использовать файл svg в качестве фонового изображения в CSS так же, как обычно используете любой другой тип изображения. Это обычная практика для таких вещей, как значки.

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

Медведь

 
Медведь
 

Следующий CSS добавляет файл svg в качестве фонового изображения, а затем позиционирует его. При использовании SVG важно установить свойство background-size , потому что размер по умолчанию может быть любым.

 .bear-icon::before {
  background: url(images/bear. svg) 0 0 без повторов;
  размер фона: 22px;
  содержание: '';
  отступ: 0 0 0 28 пикселей;
  положение: родственник;
  верх: 3px;
} 

Внутри элемента изображения

Вы также можете включить файл SVG в элемент img. В приведенном ниже примере я использую тот же файл svg, но как изображение в html. Я также плаваю это право.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, eos doloribus enim dolores. Долоре, инцидент iusto vel odit eveniet nemo sit officiis rem sed cupiditate. Minima, ut veniam quam dolor? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, neque, cum, repellendus quibusdam possimus rerum illo в предвидении vero saepe accusantium nihil fugiat qui officiis unde consectetur Labore quam aut!

 <дел>
  

    
    Lorem ipsum dolor [...]
  
 

 .bear-изображение {
   ясно: верно;
   поплавок: справа;
   ширина: 40%;
} 

Как встроенный файл

Самый универсальный способ включения SVG-файла — вставить весь файл в HTML-код. Этот метод позволяет вам стилизовать файл с помощью CSS и легко манипулировать им с помощью JavaScript. Он также имеет лучшую поддержку браузера из всех различных подходов.

В приведенном ниже примере я вставляю файл svg внутри обычного элемента div .

 <дел>
   
      .основной цвет {заполнить:#8C6239;}
      .вторичный цвет {заливка:#42210B;}
      .snout {заполнить:#C69C6D;}
      .рот {
      заполнить: нет;
      ход:#000000;
      штрих-лайнкап: круглый;
      ширина хода: 6;
      предел хода митра: 10;
      }
    
    
    <г>
      
      
    
    <г>
      <круг сх = "195" cy="31" г="31"/>
      
    
    <г>
      
      
      
    
    <г>
      
      
      
    
  
 

Дополнительные ресурсы

Для получения дополнительной информации о том, как включить изображения SVG, см.