Parsing SVG string in flutter

Question

I have a string which needs to displayed in listview as an icon. I get the string for svg from api. I couldn't find the way to parse this type of string.

Below string needs to be shown as icon in flutter

<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\"\r\n\t viewBox=\"0 0 24 24\" style=\"enable-background:new 0 0 24 24;\" xml:space=\"preserve\">\r\n<style type=\"text/css\">\r\n\t.st0{fill:none;}\r\n</style>\r\n<g>\r\n\t<rect y=\"0\" class=\"st0\" width=\"24\" height=\"24\"/>\r\n</g>\r\n<g>\r\n\t<path d=\"M20.4,17.9L16.5,14c-1.1-1.1-1.8-2.4-2.1-3.9v0c0.6-1.9,0-4.3-1.8-6c-2.4-2.4-5.9-2.7-7.9-0.7c-2,2-1.7,5.5,0.7,7.9\r\n\t\tc1.7,1.7,4.1,2.3,6,1.8l0,0c1.5,0.3,2.9,1,3.9,2.1l3.9,3.9c0.3,0.3,0.9,0.3,1.2,0c0.2-0.2,0.2-0.4,0.2-0.6\r\n\t\tC20.6,18.3,20.5,18.1,20.4,17.9z M4.9,6.7H7v2H5.3C5,8.1,4.8,7.4,4.9,6.7z M8,6.7l2,0l0,1.1c0,0.3,0,0.6,0,0.9l-2,0L8,6.7L8,6.7z\r\n\t\t M11,7.8l0-1.1h1.7c0.3,0.7,0.5,1.3,0.4,2H11C11,8.4,11,8.1,11,7.8z M12.1,5.7H11l0-1.1c0.2,0.2,0.4,0.3,0.6,0.5\r\n\t\tC11.7,5.3,11.9,5.5,12.1,5.7z M10,4l0,1.7l-2,0V3.6C8.6,3.6,9.3,3.7,10,4z M7,3.7v2H5c0.1-0.5,0.4-0.9,0.7-1.2\r\n\t\tC6.1,4.1,6.5,3.9,7,3.7z M5.9,9.7H7v1.1c-0.2-0.2-0.4-0.3-0.6-0.5C6.2,10.1,6,9.9,5.9,9.7z M8,11.4V9.7l2,0c0,0.7,0,1.5,0,2.1\r\n\t\tC9.3,11.8,8.6,11.7,8,11.4z M11,11.7c0-0.6,0-1.3,0-2h2c-0.1,0.5-0.4,0.9-0.7,1.2C11.9,11.3,11.4,11.5,11,11.7z\"/>\r\n\t<path d=\"M11.5,15.1c-0.3-0.1-0.7-0.1-1,0l-0.1,0l1.1,2.3l0.1,0c0.6-0.3,0.9-1.1,0.6-1.7C12.1,15.4,11.9,15.2,11.5,15.1z\"/>\r\n\t<polygon points=\"9.4,15.7 10.5,18 11.1,17.7 10,15.4 \t\"/>\r\n\t<path d=\"M3.7,16.5C3.7,16.5,3.7,16.5,3.7,16.5c-0.3,0.1,0.1,1.4,0.8,2.9C5.2,20.9,6,22,6.2,21.9v0l3.7-3.6l-1.1-2.3L3.7,16.5z\"/>\r\n</g>\r\n</svg>\r\n

Solution 1

Using package flutter_svg (https://pub.dev/packages/flutter_svg) you may parse it like this -

SvgPicture.string(
'''
#YOUR_SVG_CODE
'''
)

Note - Your SVG code includes <style> tag, which isn't supported by flutter_svg as of now. So it might not get rendered properly.

Solution 2

Flutter doesn't support SVG rendering out of the box, you should use flutter_svg package from pub.dev or some other alternative.

https://pub.dev/packages/flutter_svg