RetroPie forum home
    • Recent
    • Tags
    • Popular
    • Home
    • Docs
    • Register
    • Login
    Please do not post a support request without first reading and following the advice in https://retropie.org.uk/forum/topic/3/read-this-first

    Are there any rules for .svg files?

    Scheduled Pinned Locked Moved Help and Support
    emulationstaionsvgphotoshoprules
    5 Posts 3 Posters 525 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Lord VekL
      Lord Vek
      last edited by

      I am trying to create a system.svg file for some new systems on Emulation Station I created. I used "export as svg" from Adobe Photoshop. I can see that the picture is correct on a browser, yet Emulation Station has the picture blank. Are there any rules I have to follow for the svgs? Or, what can I use to produce an svg acceptable from Emulation Station?

      1 Reply Last reply Reply Quote 0
      • LolonoisL
        Lolonois
        last edited by

        EmulationStation uses nanosvg [1] to render SVG files. Thus it is limited to the features of SVG which are implemented in nanosvg, maybe its worth to check their issue and PR backlog if a feature is in the pipeline or check the commits for any feature added since 2019 as the current nanosvg version in ES dates back to 2019-08-28.

        I used save as Normal SVG or Optimized SVG in Inkscape. Make sure to do not have any Adobe flavors in the SVG.

        I worked around to get a glowing effect (which is not supported by nanosvg) by using layers and paths in the SVG. Examine the "1001 Videogames" logo SVG file [2] to get the idea.

        [1] https://github.com/memononen/nanosvg
        [2] https://retropie.org.uk/forum/topic/29578/es-theme-just-some-logos-for-auto-custom-collections

        Lord VekL 1 Reply Last reply Reply Quote 0
        • Lord VekL
          Lord Vek @Lolonois
          last edited by

          @Lolonois Thanks for the answer. If I understand correctly, I should avoid the Photoshop and use Inkscape instead?

          C 1 Reply Last reply Reply Quote 0
          • C
            cdaters @Lord Vek
            last edited by

            @Lord-Vek Correct. Adobe is no good when it comes to SVG for ES. Keep in mind too that using SVG files uses more CPU overhead than a straight-up PNG file, so you are better off using PNGs if you can, but there are cases where SVG is more "crisp" and "snappy" looking... Just use SVG files sparingly... And if so, Inkscape is your friend!

            Lord VekL 1 Reply Last reply Reply Quote 0
            • Lord VekL
              Lord Vek @cdaters
              last edited by

              @cdaters You mean I can use png files also? And the naming, system.png instead of system.svg?

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

              Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.