svg format created in Adobe Products not working

TMNTturtlguy

I apologize if there is an answer out there already, i have read through several existing threads but cannot seem to figure out what I might be doing incorrectly when trying to create .svg files that ES will recognize. I am running a pi 3B with the current 4.2 installed.

When I create a file, lets say a logo in adobe illustrator or photoshop i can save as a .png to a fairly small size and ES will run them in my theme with no issue. I know for various reasons, .svg are preferred in themes, so I can export from adobe to .svg, however ES will not recognize it?

Next step, open an existing .svg in photoshop, change a color and export back to the same .svg file. ES will not recognize it.

Next attempt, open .svg file in inkscape. Change color, save back to same .svg - it works! Ok so I can modify an existing .svg and it works. How about my new logo from adobe? Save my adobe as a .png or .svg and open in inkscape. Save from inkscape as a .svg, exact same format and file name as above that worked from inkscape. This time it will not work in ES again.

The only 2 things i can come up with after reading and researching are, 1) that I cannot use transparencies in my logos, or 2) there is something from adobe that sticks with the file that ES does not like?

Any thoughts would be awesome. At this point i am going to stick with .png files that are pretty small and work well with my build. When i get my theme far enough i will post for testing to see how it responds for others. Thanks!

mediamogul

@TMNTturtlguy

Are you converting your line art to outlines before you save out from Illustrator?

TMNTturtlguy

@mediamogul Yes, I am creating text logos in illustrator and converting the text to lines, then i am manipulating colors and line stroke widths. From there I am keeping the file and Illustrator file and opening that Illustrator file in photoshop. In photoshop I am adding some pattern overlays, transparent gradient overlay and a transparent drop shadow. From photoshop i am trying to export dirctly to .svg but that won't open in ES. It will open everywhere else, just not ES. That is why I tried to open the .svg or .png saved from photoshop in inkscape and then save, that doesn't work either. When saving out of photoshop I am saving as an 8bit RGB as it allows me to create .svg or .png and retain transparencies while being a single layer.

mediamogul

@TMNTturtlguy

All the additions being made in Photoshop are likely too complex for the svg reader in Emulation Station. It was improved a few months back, but I wouldn't be surprised if it still has it's limits. Are the additions in Photoshop all vector outlines as well? I doubt the ES reader has support for raster graphics in an SVG file. If this is the case, everything you're looking to add can still be done in vector within Illustrator. The learning curve is just a good bit higher.

TMNTturtlguy

@mediamogul I bet you are right about the raster images.....never thought about that. The photoshop file is all raster based, and that will do it!

herb_fargus

@TMNTturtlguy there's a bit of a guide here:

https://retropie.org.uk/forum/topic/7357/tutorial-create-vector-logo-from-bitmap

But yeah the nanosvg library ES uses can only do so much unfortunately

TMNTturtlguy

@herb_fargus Thank you! If i stick with .png files what are the major negatives? I am keeping as much as I can .svg, but it looks like my background images and my system logos will be .png files. I understand that they don't work as well when changing screen sizes, outside of that, will they cause other issues for peoples systems if I share my theme? Thanks again

herb_fargus

@TMNTturtlguy just depends on your preferences the pngs should function but quality will degrade the higher the resolution gets (like when everyone gets their 4K TV's) I'm partial to svgs but whatever works

onebless

Hei there, fellow themers. I just started to build a custom theme myself – this "svg-not-beeing-interpreted-properly" thing drove me nuts. Well i did not manage to get it right out of Ai CC2018 but after some quick fiddling around on the following site SVGOMG i manage to get get it to work. thanks to jakearchibald!

CUTECASECUSTOMS

@onebless Can you share the configuration you get that worked? Thanks

UDb23

@cutecasecustoms said in svg format created in Adobe Products not working:

Can you share the configuration you get that worked? Thanks

There is no actual need for "fiddling"; I created various logos for ES in SVG.
As mentioned by @herb_fargus have a look at the tutorial & tips here.

CUTECASECUSTOMS

@udb23 Thanks!