Как сделать ховер на свг?

Question

[olya_097]

есть div , внутри беграунд
примерно так:

<div class="image></div>

.image{
background-image:  url('img/picture.svg');
}

Comments

[Rustam Bainazarov]

И что вам нужно сделать?

Поменять через CSS заливку SVG, к примеру?

Таким подходом вы не сможете этого сделать. Вам нужно вставлять SVG-код напрямую или через #use.

[olya_097]

Рустам Байназаров, так?

<div class="image>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="20pt" height="20pt" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#666666fe">
<path fill="#666666" opacity="1.00" d=" M 8.19 0.00 L 11.78 0.00 C 11.85 2.89 11.89 5.79 11.88 8.68 C 12.75 8.74 14.50 8.84 15.38 8.90 C 13.70 11.12 11.93 13.27 10.00 15.27 C 8.07 13.27 6.30 11.12 4.62 8.90 C 5.50 8.84 7.25 8.74 8.12 8.68 C 8.12 5.79 8.15 2.89 8.19 0.00 Z" />
<path fill="#666666" opacity="1.00" d=" M 0.32 13.72 C 1.02 13.73 2.42 13.74 3.12 13.75 C 3.13 14.69 3.15 16.56 3.17 17.50 C 7.72 17.50 12.28 17.50 16.83 17.50 C 16.85 16.56 16.87 14.69 16.88 13.75 C 17.58 13.74 18.98 13.73 19.68 13.72 C 19.61 15.82 19.53 17.91 19.46 20.00 L 0.64 20.00 C 0.42 17.91 0.37 15.82 0.32 13.72 Z" />
</g>
</svg>

</div>

[Rustam Bainazarov]

olya_097, к пример, да. Тогда он станет доступен для стилизации с помощью CSS.

[olya_097]

Рустам Байназаров, ок, как стилизовать? подскажите , пожалуйста

[Rustam Bainazarov]

olya_097, вот так только. Я оптимизировал.

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.19 0h3.59c.07 2.89.11 5.79.1 8.68.87.06 2.62.16 3.5.22-1.68 2.22-3.45 4.37-5.38 6.37-1.93-2-3.7-4.15-5.38-6.37.88-.06 2.63-.16 3.5-.22 0-2.89.03-5.79.07-8.68z"/>
  <path d="M.32 13.72c.7.01 2.1.02 2.8.03.01.94.03 2.81.05 3.75h13.66c.02-.94.04-2.81.05-3.75.7-.01 2.1-.02 2.8-.03-.07 2.1-.15 4.19-.22 6.28H.64c-.22-2.09-.27-4.18-.32-6.28z"/>
</svg>

[Rustam Bainazarov]

olya_097,

[olya_097]

Рустам Байназаров, ок, спасибо
но как сделать ховер?

[Rustam Bainazarov]

olya_097, смотрите комментарий выше с jsfiddle.

[olya_097]

olya_097, спасибо огромное!
а как Вы оптимизировали?

[Rustam Bainazarov]

olya_097, SVGO + в Inkscape объединил пути + вручную убрал ненужные данные.

Можно вот так вообще, ещё меньше:

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.19 0h3.59c.07 2.89.11 5.79.1 8.68.87.06 2.62.16 3.5.22-1.68 2.22-3.45 4.37-5.38 6.37-1.93-2-3.7-4.15-5.38-6.37.88-.06 2.63-.16 3.5-.22 0-2.89.03-5.79.07-8.68zM.32 13.72c.7.01 2.1.02 2.8.03.01.94.03 2.81.05 3.75h13.66c.02-.94.04-2.81.05-3.75.7-.01 2.1-.02 2.8-.03-.07 2.1-.15 4.19-.22 6.28H.64c-.22-2.09-.27-4.18-.32-6.28z"/>
</svg>

[Rustam Bainazarov]

olya_097, можете для начала попользоваться тут:
https://jakearchibald.github.io/svgomg/

[olya_097]

Рустам Байназаров, спасибо

[Максим]

olya_097, я же это всё предлогал сделать в почте

[Rustam Bainazarov]

Максим Ленский, она тебе не поверила. Думала, что ты все врешь! Жизнь научила её не верить мужчинам.

[Максим]

Рустам Байназаров, в её года то ?

[olya_097]

Максим Ленский, так вроде мы говорили про конвертацию из png или jpg в свг

[Максим]

olya_097, это всё одно и тоже, я бы научил рисовать с ноля до полной готовности, так же и научил бы делать ховер на img.svg и многое что .. Я просто усираться не люблю

[olya_097]

Максим Ленский, значит я не правильно поняла.
извини

[Rustam Bainazarov]

Максим Ленский, я не знаю, сколько ей лет, где она живет и как она выглядит :))

[olya_097]

Рустам Байназаров, я извиняюсь
не подскажете почему тут ховер не срабатывает?
https://codepen.io/anon/pen/XLKPme