0

I am new to Flutter and currently trying to implement an SVG file from a Figma project into my application. However, the SVG image is not displaying, and I am not getting any error messages.

/lib/pages/home.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SvgPicture.asset("assets/images/logo.svg"),
      ),
    );
  }
}

/assets/images/logo.svg logo.svg pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_svg: ^2.0.7

flutter:
  uses-material-design: true

  assets:
    - assets/images/

I verified that I have the necessary dependencies, including flutter_svg, to render SVG files in Flutter. I tried using the same code with another SVG file downloaded from the internet, and that SVG is showing correctly in my application. I attempted to copy an individual element from the non-working Figma SVG file and pasted it into a new blank SVG file. However, the issue persists, and the SVG is still not showing. I would greatly appreciate any insights or guidance on why the SVG file from the Figma project is not displaying in my Flutter application. Thank you in advance!

Shivang Srivastava
  • 13
  • 2
  • Your code seems to be correct. Have you tried clean building the project? – Maleesha97 Jul 19 '23 at 14:33
  • 2
    The logo is essentially just a jpg embedded via data dataURL in a svg. You can extract the data URL and add it as an raster/bitmap image asset instead or ask the customer/designer to provide a **proper vector/svg version** of this logo. Another common issue with figma vs. flutter: figma always puts `` elements to the bottom of the svg – no problem for browsers, but native environments often prefer a definition-before-usage order. Moving the `` element to the top might help. – herrstrietzel Jul 20 '23 at 01:03

0 Answers0