search

dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.67k stars 459 forks source link

Using href to external local file within SvgPicture.string #332

Open BillTheGoat opened 4 years ago

BillTheGoat commented 4 years ago

I would like to use SVG sprite files for colored icons. Using the example flutter project, I can get an icon to load if I insert a <use > tag within the svg sprite file.

The SVG below works using 

const List<String> assetNames = <String>[
...
  'assets/simple/SVG-sprite-icons.svg',
];
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<symbol id="news" viewBox="0 -61 512 512"><title>news</title><path d="m452 390h-377c-41.359375 0-75-33.640625-75-75v-270c0-24.808594 20.191406-45 45-45h376.910156c4.46875 0 3.621094 1.960938 2.199219 5.101562-14.113281-1.375-27.109375 10.027344-27.109375 24.898438v300c0 29.742188 23.945312 55 55.351562 55 .039063 3.25-.0625 5-.351562 5zm0 0" fill="#e8efff"/><path d="m452 390h-225.820312v-390h195.730468c4.46875 0 3.621094 1.960938 2.199219 5.101562-14.109375-1.371093-27.109375 10.027344-27.109375 24.898438v300c0 29.738281 23.941406 55 55.351562 55 .039063 3.25-.0625 5-.351562 5zm0 0" fill="#ccdfff"/><path d="m197 180h-121c-8.285156 0-15 6.714844-15 15v120c0 8.285156 6.714844 15 15 15h121c8.285156 0 15-6.714844 15-15v-120c0-8.285156-6.714844-15-15-15zm0 0" fill="#ffc543"/><path d="m75 90h242c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15h-242c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15zm0 0" fill="#40b4f9"/><path d="m317 120h-242c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15h242c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15zm0 0" fill="#40b4f9"/><g fill="#0097f1"><path d="m317 180h-61c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15h61c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15zm0 0"/><path d="m317 240h-61c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15h61c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15zm0 0"/><path d="m317 300h-61c-8.285156 0-15 6.714844-15 15s6.714844 15 15 15h61c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15zm0 0"/><path d="m332 75c0 8.28125-6.71875 15-15 15h-90.820312v-30h90.820312c8.28125 0 15 6.71875 15 15zm0 0"/><path d="m332 135c0 8.28125-6.71875 15-15 15h-90.820312v-30h90.820312c8.28125 0 15 6.71875 15 15zm0 0"/><path d="m497 90h-50v195c0 5.515625-4.484375 10-10 10h-40l-5 5v30c0 33.136719 26.863281 60 60 60s60-26.863281 60-60v-225c0-8.285156-6.714844-15-15-15zm0 0"/></g><path d="m392 30v270h45c8.285156 0 15-6.714844 15-15v-255c0-16.601562-13.484375-30.0507812-30.089844-30-16.53125.0507812-29.910156 13.464844-29.910156 30zm0 0" fill="#96beed"/></symbol>

    <use xlink:href="#news" x="0" y="0" />
</svg>

However I would like to be able to reference specific icons (<symbol> tags) programmatically. If I comment out the <use> tag and try the code below or variations on the href parameter (like assets/flutter_assets/assets/simple/SVG-sprite-icons.svg#news), I cannot get anything to display:

_painters.add(SvgPicture.string('''<svg viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="assets/simple/SVG-sprite-icons.svg#news"  x="0" y="0" />
</svg>'''));
BillTheGoat commented 4 years ago

I can work around this issue by saving the SVG without the <use> and closing tag as a String in a dart file, and then concatenating with the pertinent <use> and closing tags. Not ideal, but it loads.

bot509 commented 3 years ago

I can work around this issue by saving the SVG without the <use> and closing tag as a String in a dart file, and then concatenating with the pertinent <use> and closing tags. Not ideal, but it loads.

is the cpu performance and memory usage higher than rendering with separated svg files?

dnfield commented 3 years ago

Loading multiple files will always be more costly than loading a single file, especially when you need all the files in memory at once anyway.