SVG изображение становится испорченным, когда я помещаю его в HTML

Question

Я недавно начал использовать SVG, и мне это нравится. Там так чисто, круто и легко оформить.

Ну, я наткнулся на проблему, когда попытался перейти на один из моих svg в html (работает с каждым из моих svgs, кроме этого). Это работает совершенно нормально, если я называю это как изображение (<img src="hill.svg"></img>), но когда я пытаюсь использовать его либо с помощью PHP (include 'hill.svg';), либо просто передавая его по индексным файлам, это приводит к ошибкам. Вот изображение. Перепутал svg вверху слева и работает на весь экран. Тот же файл, только что рабочий встроен в "background-image"

Это похоже на то, что фон превращается в один из этих "отсутствующих изображений"

Любая помощь будет принята с благодарностью. SVG: https://pastebin.com/RsSAGv8M

Answer 1

В вашем SVG есть несколько растровых изображений:

• 947B2F3D9DDD76B8.png (два раза),
• 947B2F3D9DDD76B9.png
• 947B2F3D9DDD76BF.png

Возможно, они недоступны на вашем веб-сервере. Если SVG связан как <img>, его никогда не пытаются получить, так как по соображениям безопасности все изображения должны быть автономными. Но когда SVG встраивается в HTML-страницу, запрос не выполняется. и в некоторых браузерах отображается значок «отсутствует изображение».

Либо удалите теги <image> в файле SVG (кажется, вы не пропустили их содержимое?), Либо вставьте их в виде URL-адресов данных. (Я не знаю Adobe Illustrator достаточно хорошо, чтобы знать, есть ли утилита для этого.)