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

    SVG format for EmulationStation

    Scheduled Pinned Locked Moved Help and Support
    svgemulationstatiofile formatlogoinkscape
    49 Posts 9 Posters 35.6k 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.
    • herb_fargusH
      herb_fargus administrators @UDb23
      last edited by

      @UDb23 yep ES is a finicky thing. glad you got it sorted.

      If you read the documentation it will answer 99% of your questions: https://retropie.org.uk/docs/

      Also if you want a solution to your problems read this first: https://retropie.org.uk/forum/topic/3/read-this-first

      1 Reply Last reply Reply Quote 0
      • RiverstormR
        Riverstorm @UDb23
        last edited by

        @UDb23 said in SVG format for EmulationStation:

        I'd like to modify the Carbon theme to show different mame system logos for the different available mame implementations (libretro, advance mame, mame4all).

        Any change you could share the steps/logos to do this? It's a true drag to have 3 implementations of MAME all under with same logo. :)

        UDb23U 1 Reply Last reply Reply Quote 0
        • UDb23U
          UDb23 @Riverstorm
          last edited by

          @Riverstorm Just made a Vic20 logo for this testing. Now that it works I'll create the different Mame logos too. Will share them, together with steps to set them up in ES/Carbon, as soon as ready.

          RiverstormR V 2 Replies Last reply Reply Quote 1
          • RiverstormR
            Riverstorm @UDb23
            last edited by

            @UDb23 said in SVG format for EmulationStation:

            @Riverstorm Just made a Vic20 logo for this testing. Now that it works I'll create the different Mame logos too. Will share them, together with steps to set them up in ES/Carbon, as soon as ready.

            Thanks UDb23, really looking forward to that. Right now I just remember AdvMAME on left, lr-mame2003 middle and mame4all on the right. A visual distinction would be wonderful! :)

            UDb23U 1 Reply Last reply Reply Quote 0
            • UDb23U
              UDb23 @Riverstorm
              last edited by UDb23

              @Riverstorm Here you go: custom Mame logos ready and tested with Retropie 3.8.1 with latest ES/Carbon theme version

              lr-mame
              Lr-Mame: vectorialized the bitmap libretro logo and added to Mame logo.

              mame4all
              Mame4all: could not find any official logo; just some very low res logos. Based on these I created a new SVG logo from scratch that includes the original standard Mame logo.

              advancemame
              AdvanceMame: recreated ex-novo in SVG the bitmap logo found on the advancemame official webpage.

              Logos can be downloaded -> see updated link below.
              Instructions on how to install in EmulationStation in next post.

              Notes:
              All product names, logos, and brands are property of their respective owners. All company, product and service names used in the custom logos are for identification purposes only.
              As far as I know owners of single original logos allow use of their logos as long as they are given for free (not bound to any commercial activity). If you have different information please let me know.

              RiverstormR 1 Reply Last reply Reply Quote 2
              • UDb23U
                UDb23
                last edited by

                How to install custom Mame logos in Emulation Station/Carbon theme

                Step 1: edit es_systems.cfg

                First of all create a backup copy of your original es_systems.cfg file you find in /etc/emulationstation/ just in case something goes wrong.
                Even better if you create a copy of the file in /home/pi/.emulationstation and modify that one.
                ES checks this folder first and in this way you avoid overwriting of your customized file by a newer ES versions installation.

                In your es_systems.cfg look for the mame systems and replace each <theme> with the corresponding new one.

                For AdvanceMame the <system> section looks like this:
                <name>mame-advmame</name>
                <fullname>Multiple Arcade Machine Emulator</fullname>
                <path>/home/pi/RetroPie/roms/mame-advmame</path>
                <extension>.zip .ZIP</extension>
                <command>/opt/retropie/supplementary/runcommand/runcommand.sh 0 SYS mame-advmame %ROM%</command>
                <platform>arcade</platform>
                <theme>mame</theme>
                Replace "mame" in this last line with "mameadv".
                Line becomes: <theme>mameadv</theme>

                In the same way replace <theme> for Mame-libretro and Mame-mame4all systems with:
                <theme>mamelr</theme>
                <theme>mame4all</theme>

                Step 2: Create a separate theme folder and file structure for each specific mame version.
                Following folders have to be created under the /etc/emulationstation/themes/carbon directory.
                Folders must be named as follows (must be compliant with the modified es_systems.cfg):
                mameadv
                mamelr
                mame4all

                Each folder must contain the same content of the original mame theme folder.
                BTW You can simply make copies of original mame theme folder (including subfolders and content) and rename them.

                Step 3: Copy the specific custom logo in each of the newly created theme folders.
                In each just mentioned mame theme folder: replace (overwrite) the original system.svg you find in the /art subfolder with the corresponding custom logo (system.svg) you downloaded (or created your own).

                Step 4: Reboot & have fun!

                1 Reply Last reply Reply Quote 1
                • RiverstormR
                  Riverstorm @UDb23
                  last edited by

                  @UDb23 said in SVG format for EmulationStation:

                  custom Mame logos ready and tested with Retropie 3.8.1 with latest ES/Carbon theme version

                  Nice UDb, you have artistic talent too! :) Those logos are really clean and sharp, nice job! I really appreciate the new art. It will be nice to have some distinction on MAME versions. This will be so much slicker than seeing, MAME, MAME, MAME three times in a row. I do run a few other systems and ports but I mainly stick to MAME.

                  I wonder if there would be any merit in breaking out the Libretro cores. I am usually only running one regardless but technically there are three. lr-imame4all, lr-mame2003, lr-mame2010. It seems most of the code tweaks are going into lr-mame2003 and it's the one to use. I suppose down the road a ways lr-mame2010 would come into use as it seems a logical progression. Really nice work!

                  UDb23U 1 Reply Last reply Reply Quote 1
                  • UDb23U
                    UDb23 @Riverstorm
                    last edited by

                    @Riverstorm Glad that you like them :-)
                    Last time I used Inkscape was really long time ago so it took me a while to get the grip again.

                    If you need also specific version logos (lr-mame 2003, lr-mame 2010 etc), at this stage it's quite easy for me to create them by adding version text into the graphics. Just let me know.

                    For actually using them in ES, you'd need also to define separate <system>s with specific rom <path> in es_systems.cfg and, of course, create actual specific rom directories the path refers to.

                    RiverstormR 1 Reply Last reply Reply Quote 0
                    • RiverstormR
                      Riverstorm @UDb23
                      last edited by Riverstorm

                      @UDb23 said in SVG format for EmulationStation:

                      If you need also specific version logos (lr-mame 2003, lr-mame 2010 etc), at this stage it's quite easy for me to create them by adding version text into the graphics. Just let me know.

                      I think that would be great as it gives more options in your download pack. MAME is unique in it has several versions around 10 or so. It's by no means a hurry and as it stands they are extremely useful to me.

                      It's tough as mame4all-pi and lr-imame4all share the same directory. The directory may have a mix of the two ROMs. I mainly use mame4all-pi as its functionality is way more complete than lr-imame4all so I would attach the mame4all logo but there's always exceptions so options are good. :)

                      It's the same for lr-mame2003 and lr-mame2010. They share the same directory but it might be handy to have a logo that reflects the main ROM set. It seems some are venturing into the 2010 territory but I think 2003 is the mainstay for now but maybe in the future they break those two apart as the version gap is fairly significant.

                      AdvMAME does have two ROM sets but is its own beast and stands alone so that logo is definitely a no brainer.

                      I like the idea of being able to break out the two non-libretro cores (mame4all and AdvMAME) but with options to reflect the different Libretro cores is really nice too. I guess that's the long way of saying if you have time but in no hurry I think the extra logos to reflect MAME would be great! :)

                      UDb23U 1 Reply Last reply Reply Quote 0
                      • UDb23U
                        UDb23 @Riverstorm
                        last edited by

                        @Riverstorm If I find time I'll work on it in the weekend.

                        RiverstormR mattrixkM 2 Replies Last reply Reply Quote 0
                        • RiverstormR
                          Riverstorm @UDb23
                          last edited by

                          @UDb23 said in SVG format for EmulationStation:

                          @Riverstorm If I find time I'll work on it in the weekend.

                          Thanks UDb, I appreciate all the work you put into the new logos, they really do look sharp!

                          UDb23U 1 Reply Last reply Reply Quote 0
                          • mattrixkM
                            mattrixk @UDb23
                            last edited by

                            @UDb23 Could you tell me the difference between using SVG and PNG on Emulationstation? Is it just the scaling? Is there any performance difference?

                            Say you had a 900 x 450px png vs a 900 x 450px svg to be used as a logo in the System carousel. Would one be better to use than the other? Would there be much difference?

                            Also, I suppose there would be some difference depending on the style of artwork; vector style line work vs raster style image (but still made with vector)...

                            My ES themes: MetaPixel | Spare | Io | Indent

                            herb_fargusH UDb23U 2 Replies Last reply Reply Quote 0
                            • herb_fargusH
                              herb_fargus administrators @mattrixk
                              last edited by

                              @mattrixk best way to check is to test it out. the way the svg is drawn may potentially affect it from what @Rookervik alluded to but I'm really not sure, it takes vram to display on the screen either way, though I've found that forcing a lower resolution helps with that but I havent done extensive testing to know one way or the other.

                              If you read the documentation it will answer 99% of your questions: https://retropie.org.uk/docs/

                              Also if you want a solution to your problems read this first: https://retropie.org.uk/forum/topic/3/read-this-first

                              mattrixkM 1 Reply Last reply Reply Quote 0
                              • mattrixkM
                                mattrixk @herb_fargus
                                last edited by

                                @herb_fargus Okay, thanks. I don't know anything about vram (how it works, what it does, what it is etc), but from what I've gathered, the smaller the image, the fewer resources it uses, which makes sense.

                                Also, that you can load an image and no matter how big you scale it, it uses the same amount of resources, so you can use a tiny image and scale it up, but then it would be pixelated, which works fine for the Pixel themes, or blurry images, but not so much if you want crystal clear images.

                                My ES themes: MetaPixel | Spare | Io | Indent

                                1 Reply Last reply Reply Quote 0
                                • RookervikR
                                  Rookervik Global Moderator
                                  last edited by

                                  Yeah, that's pretty much correct. Smaller images take smaller resources.

                                  The thing you have to remember is that SVGs scale indefinitely. They're vector, not bitmap. So a PNG and a SVG, displayed at the exact same size on screen, will take up exactly the same VRAM. It's when you start stretching the PNG larger than full size that you start seeing performance boosts. No matter how far you scale that PNG (and how bad it looks doing so) it will always take the same VRAM. Whatever size a SVG is displayed at is what VRAM it's going to use.

                                  if you take a 1kb SVG and stretch it to a full 1920x1080, it will take the same VRAM as a full size uncompressed 1080p PNG. Even though the size of the SVG was very small. But if you take a 1kb PNG that's normally 8x8 pixels and stretch it to full screen, it doesn't take any more VRAM than it did at 8x8. That's the difference between bitmap graphics (png), and vector graphics (svg).

                                  From what I've seen, PNGs are a lot lighter on system resources than SVGs. It shouldn't really matter once those pictures are loaded into VRAM - from there the graphics does the work... but it sure seems SVGs lag the system more than PNG.

                                  mattrixkM 1 Reply Last reply Reply Quote 0
                                  • mattrixkM
                                    mattrixk @Rookervik
                                    last edited by

                                    Thanks @Rookervik. That was really well explained.

                                    So it basically boils down to personal choice and experimentation, but png/jpg are better for some uses and svg is better for others.

                                    My ES themes: MetaPixel | Spare | Io | Indent

                                    RookervikR 1 Reply Last reply Reply Quote 0
                                    • RookervikR
                                      Rookervik Global Moderator @mattrixk
                                      last edited by

                                      @mattrixk

                                      The only benefit for SVG is that is scales indefinitely. Sometimes you can get some nice small file sizes if the vector is fairly simple. So, in 30 years when we're all using 16k TVs and still using EmulationStation, Carbon will still look sharp. Even though... the Pi can't handle a screen that big, nor does it have enough VRAM to display a SVG of that size. Hehehe. So I guess Carbon will be broken at that size, but Pixel will still be cranking. :D

                                      mattrixkM 1 Reply Last reply Reply Quote 0
                                      • mattrixkM
                                        mattrixk @Rookervik
                                        last edited by

                                        @Rookervik Ahh, but in 30 years we'll be using a Pi 5, or maybe even 6. They may have even worked out perfect N64 and Dreamcast emulation by then.

                                        My ES themes: MetaPixel | Spare | Io | Indent

                                        RookervikR 1 Reply Last reply Reply Quote 0
                                        • RookervikR
                                          Rookervik Global Moderator @mattrixk
                                          last edited by

                                          @mattrixk Hahaha, perfect n64 emulation. That's a laugh. Not even in 30 years. :D Isn't Pi finished? Can't we have something other than this graphics chip? LOL. I don't even think Broadcom knows how to use it.

                                          herb_fargusH 1 Reply Last reply Reply Quote 0
                                          • herb_fargusH
                                            herb_fargus administrators @Rookervik
                                            last edited by

                                            @Rookervik well they are definitely going to need a new chip if they want to support more than 1 GB of RAM. They are sort of getting opengl working but I'm sure there is much room for improvement on that front.

                                            If you read the documentation it will answer 99% of your questions: https://retropie.org.uk/docs/

                                            Also if you want a solution to your problems read this first: https://retropie.org.uk/forum/topic/3/read-this-first

                                            RookervikR 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.