flutter_svg icon indicating copy to clipboard operation
flutter_svg copied to clipboard

[WEB] The SVG image is displayed entirely in black instead of showing only the outlined path

Open Mage111 opened this issue 1 year ago • 3 comments

[WEB] The SVG image is displayed entirely in black instead of showing only the outlined path

  • Flutter SVG 2.0.9
  • Dart SDK version: 3.2.0 (stable)
  • flutter: 3.16.0

Here is the .svg image (in Chrome/Edge): image The image is displayed entirely in black in the flutter_svg package: image

The .svg file content:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#231F20;stroke-width:12.8598;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<g>
		<g>
			<path class="st0" d="M409.9,249.5V120.9c0-7.1-5.8-12.9-12.9-12.9H114.1c-7.1,0-12.9,5.8-12.9,12.9v128.6H409.9z"/>
			<rect x="69.1" y="365.2" class="st0" width="25.7" height="38.6"/>
			<rect x="416.3" y="365.2" class="st0" width="25.7" height="38.6"/>
		</g>
		<path class="st0" d="M307,236.6c0,7.1-5.8,12.9-12.9,12.9H217c-7.1,0-12.9-5.8-12.9-12.9v-51.4c0-7.1,5.8-12.9,12.9-12.9h77.2
			c7.1,0,12.9,5.8,12.9,12.9V236.6z"/>
		<line class="st0" x1="56.3" y1="339.5" x2="454.9" y2="339.5"/>
	</g>
	<rect x="56.3" y="281.6" class="st0" width="398.7" height="83.6"/>
	<path class="st0" d="M442.1,281.6v-19.3c0-7.1-5.8-12.9-12.9-12.9H82c-7.1,0-12.9,5.8-12.9,12.9v19.3H442.1z"/>
</g>
</svg>

If I remove the fill="none" from element id=".st0", then I get the same thing in Chrome as I see in Flutter. So, I guess flutter_svg ignoring fill="none" somehow.

Mage111 avatar Dec 07 '23 07:12 Mage111

Estou com mesmo problema

ivanluizjr avatar Dec 22 '23 16:12 ivanluizjr

The style tag isn't supported.

If you used illustrator to export this, when you export to an svg, the dialog box that shows has a dropdown that lets you select "Inline Attributes", if this option is used the resulting svg will work with the flutter_svg package.

spydon avatar Mar 11 '24 14:03 spydon