Как правильно правильно вставить картинку в формате SVG?

Question

[Леонид Гусман]

Доброго времени суток. Такая проблема: не могу нормально вставить картинку в формате svg, гугл хром и остальные браузеры отказываются ее видеть. КОД: <img src="fish.svg">

Comments

[sergey]

svg в илюстраторе верно сохранили? путь верный указали?

[riot26]

Нужен код с картинкой на каком-то codepen/jsfiddle

[Леонид Гусман]

riot26: https://codepen.io/fara123/pen/yXgbRr Вот, в html вставил то, как я вставля у себя на сайте изображение, в css (не нашел где там вставить svg) вставил svg файл.

[Леонид Гусман]

Sagan: Путь 100% верный, я для уверенности положил html файл и svg изображение в одну папку. Сохранял в илюстраторе с такими настройками как на скриншоте

[Froggyweb]

Перетяни просто свг файл в браузер. Открывается? Посмотри консоль браузера. на ошибки в консоли. Проверить стили блока. Все должно работать.

[Леонид Гусман]

Froggyweb: если просто перетянуть в браузер нормально открывает

[Froggyweb]

gus_man: rjczr скорее всего с путем. посмотри на элемент в инспекторе, стили, размеры

[Леонид Гусман]

Всё решилось заменой файла, всем спасибо за помощь )

Answer 1

[Ankhena]

Какой способ подключения svg на сайт все же оптимальный?

Answer 2

[Елисей Басенко]

Совет, создавайте вектор в Adobe illustrator, экспортируйте в SVG и забирайте код от туда.
Код лучше всего вставлять напрямую в HTML или PHP.
Если в вашей SVG картинке много точек и вы кодите на PHP, то можно забыть про длинные строки SVG в коде страницы (неудобно) и импортировать их аккуратной строчкой вроде этой (удобно) :)

<?php include_once("/images/svg/svg_image.php") //импорт SVG из отдельного файла ?>

Для Wordpress необходимо указать путь до директории темы. Так:

<?php include_once(get_template_directory() . "/images/svg/svg_image.php") //импорт SVG из отдельного файла ?>

Ну а про преимущества SVG думаю объяснять не нужно)

Answer 3

[Илья]

https://youtu.be/TNX0-JLdM_U

Comments

[Леонид Гусман]

Не помогло (

Answer 4

[Леонид Гусман]

Спасибо большое, всё решилось заменой картинки ( походу файл был повреждён или что-то еще )