Вставить SVG

SVG — технология, которая позволяет отображать векторную графику на сайте (графика, которая не меняет качество при изменения размеров).

1-ый способ: через тег <svg>

SVG можно подключать тремя способами. Первый, это подключить напрямую на HTML-странице между тегами <svg>.

<svg>
    <circle cx='30' cy='30' r='30' fill='green'>
</svg>

Пример на JSFiddle

2-ой способ: внешний файл

Второй способ, это создать отдельный файл с расширением SVG, и подключить в теге <img>.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg" height="100px" width="100px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<!-- код SVG -->
 
</svg>

3-ий способ: Data URI

Третий способ, это прописать SVG через Data URI. Этот способ удобен, если не надо создавать отдельный файл для маленькой картинки.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='green' /></svg>" width="30" height="30">

Пример на JSFiddle

4-ый способ: CSS

SVG-картинки можно вставлять как фон объектов через CSS.

.logo {
    background: url(image.svg);
}