Как настроить/отобразить SVG градиент на сайте?

Question

[weranda]

Приветствую
Не могу понять в чем ошибка отображения SVG градиента. Есть файл – file.csv, в нем код:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve" display="none">
	<defs>

		<symbol id="xxxxx" viewbox="0 0 80 80">

			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="13" y1="20" x2="33" y2="20">
				<stop  offset="0" style="stop-color:#B42E27"/>
				<stop  offset="1" style="stop-color:#F11727"/>
			</linearGradient>

			<path fill="url(#SVGID_4_)" stroke="#404041" stroke-miterlimit="10" d="M30,30H16c-1.6,0-3-1.4-3-3V13c0-1.6,1.4-3,3-3h14
		c1.6,0,3,1.4,3,3v14C33,28.6,31.6,30,30,30z"/>
			<path fill="#404041" stroke="#404041" stroke-miterlimit="10" d="M55,30H41c-1.7,0-3-1.4-3-3V13c0-1.6,1.3-3,3-3h14c1.7,0,3,1.4,3,3v14C58,28.6,56.7,30,55,30z"/>
		
		</symbol>
	</defs>
</svg>

Выводится этот код на сайте так:

<div class="m-img">
	<svg>
		<use xlink:href="custom/img/svg/file.svg#xxxxx"></use>
	</svg>
</div>

Градиент выводиться ну никак не хочет. Подскажите пожалуйста что не так и как исправить!

В файле две фигуры:
1. фигура с градиентом и обводкой (обводка отображается, градиент не отображается)
2. фигура с заливкой и обводкой (обводка и заливка отображаются)

Answer 1

[Алексей]

Попробуй так:

<svg height="16" width="16" version="1.1">
<defs>
  <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="13" y1="20" x2="33" y2="20">
    <stop  offset="0" style="stop-color:#B42E27"/>
    <stop  offset="1" style="stop-color:#F11727"/>
  </linearGradient>
  <path id="petal" fill="url(#SVGID_4_)" stroke="#404041" stroke-miterlimit="10" d="M30,30H16c-1.6,0-3-1.4-3-3V13c0-1.6,1.4-3,3-3h14
    c1.6,0,3,1.4,3,3v14C33,28.6,31.6,30,30,30z"/>
  <symbol id="xxxxx" viewbox="0 0 50 50">
    <use xlink:href="#petal" y="0" x="0"/>
  </symbol>
</defs>
</svg>

<svg height="112" width="64" version="1.1">
	<use xlink:href="custom/img/svg/file.svg#xxxxx"/>
</svg>

Comments

[weranda]

Алексей Не работает и так( Так даже обводка не выводится.