- 17,680
- United Kingdom
Resizing makes almost no difference to file size in SVG. Attach the SVG file you're working on here and we may be able to help.
User Decals - A Tutorial On How To Make .SVG (Request in separate thread)
- Thread starter daan
- 1,525 comments
- 419,921 views
- 17,680
- United Kingdom
If you attach the SVG file you're trying to break down it will be easier to advise.
How did you turn the image you posted into SVG? How have you tried breaking the layers into segments? And, did you use SVGOMG to reduce the size of the file(s) at any point?
Utlimately, breaking it up will get the file sizes down, you might just have to break it up into a lot of pieces.
- 442
- Celina, Texas
- Tex_Hill
I used Inkscape to create a bitmap image with multiple layers. I then followed the instructions in the video below to segment/split the image into quarters. I then exported each segmented layer as an SVG after simplifying them in Inkscape (ctrl-L). The exported SVG's were still too big, so i did use SVGOMG to try to get them smaller, but I still end up over the 15kb limit.
Last edited:
- 17,680
- United Kingdom
Well, you're kind of in the right ball park, but I'm not sure from your terminology if you're doing the right things. Did you use the Trace Bitmap function on the path menu?
If you've sliced up the bitmap file, then simply exported it as SVG it won't work even if the files were 1kb each. Files have to be pure vector files, if it's a bitmap wrapped up in an SVG file it won't work.
You need to trace the file first, and work with it as a vector file.
You can split these up, either by layer, or by slicing it up, or a combination of both, but however you do it, it's a bit tricky, and you're not going to get a decent image from only a few files, and if none of what I've said so far makes any sense to you, then please understand that it is (unfortunately) just not that simple - hence the showcase isn't flooded with high quality illustrations.
FWIW, I don't use inkscape, I pay for a different program (CorelDraw), and whilst the menus are different, the principle is the same... I did an auto trace which came out as 386kb, ran it through SVGOMG to get it down to 234kb...
... I've then run this through my technique for handling this type of image (which is actually a spreadsheet!), and it comes out as 19 files (17 to make the image, 1 as a positioning template, and 1 as a background to hide the rubbish anti-aliasing).
If you want to learn how to do it, we'll need some inkscape experts to chime in, as like I say, I don't use inkscape...
If you don't want to learn and just want the files, I can upload them.
Last edited:
- 442
- Celina, Texas
- Tex_Hill
I would really like to learn - you know, the whole "give a man a fish" thing.
I'm pretty sure I was using the trace bitmap function. I end up with 20 different layers of the image. Each layer being a different color gradient from the rest.
- 17,680
- United Kingdom
It would have looked something like this...
If you had 20 colour layers, it would give you an image containing about 40,000 nodes, and a file that's about 2020kb. (Note: always make sure you're not exporting the original bitmap at the same time)
SVGOMG will bring that down to 630kb, and it's a really good image...
But at the bare minimum, that's theoretically 42 files (630 ÷ 15)...
In reality, because there's 20 layers, there's 20 paths (the shapes that make up the image), and most of those paths are over 15kb on their own (and that's already optimised to the max), in fact looking at it, most will be between
20kb and 37kb.
This means you have to slice up the image either while it's a bitmap (doing the way that was in your tutorial), or when it's an SVG (In Inkscape I think you need the 'pathops' plugin).
Assuming you're doing it by slicing the bitmap up first, and using the Trace Bitmap option on each of the pieces, you can try cutting it into more pieces first... and/or, when you trace them using fewer colours.
If you did it into quarters, and did it as 20 colours, you should end up with ~80 pieces (!)
Each piece can be saved individually, and run through SVGOMG.
Theoretically you can keep going back and trying smaller pieces, and fewer colours until you get all the files under 15kb... Keep in mind, that the more detail there is in the image, the bigger the files will end up - so for example, if you have a piece that's mostly just white, it'll end up being a small file, where as a file that contained Elvis's hand and Burger, those files will end up bigger.
... doing it this way is an absolute ball-ache though, and that's before you think about how you're going to rebuild them on the car.
If any other members have more experience with Inkscape and know of slicker ways, please, cut in!
My Robert Rauschenberg Artcar used a whole bunch of techniques like this... so it is possible, but it took weeks!
If you get the path-ops plug in for Inkscape...
You would trace the entire image in one go, then you can use a rectangle shape, and the intersect tool to cut up pieces as you see fit, as in this old video I did...
That's an old version of Corel, so it looks different in inkscape, but the idea is the same.
Again, it can still take a long time to do, but it's how I did some of my Pink Floyd tribute car..
... again, it takes ages.
If you had 20 colour layers, it would give you an image containing about 40,000 nodes, and a file that's about 2020kb. (Note: always make sure you're not exporting the original bitmap at the same time)
SVGOMG will bring that down to 630kb, and it's a really good image...
But at the bare minimum, that's theoretically 42 files (630 ÷ 15)...
In reality, because there's 20 layers, there's 20 paths (the shapes that make up the image), and most of those paths are over 15kb on their own (and that's already optimised to the max), in fact looking at it, most will be between
20kb and 37kb.
This means you have to slice up the image either while it's a bitmap (doing the way that was in your tutorial), or when it's an SVG (In Inkscape I think you need the 'pathops' plugin).
Assuming you're doing it by slicing the bitmap up first, and using the Trace Bitmap option on each of the pieces, you can try cutting it into more pieces first... and/or, when you trace them using fewer colours.
If you did it into quarters, and did it as 20 colours, you should end up with ~80 pieces (!)
Each piece can be saved individually, and run through SVGOMG.
Theoretically you can keep going back and trying smaller pieces, and fewer colours until you get all the files under 15kb... Keep in mind, that the more detail there is in the image, the bigger the files will end up - so for example, if you have a piece that's mostly just white, it'll end up being a small file, where as a file that contained Elvis's hand and Burger, those files will end up bigger.
... doing it this way is an absolute ball-ache though, and that's before you think about how you're going to rebuild them on the car.
If any other members have more experience with Inkscape and know of slicker ways, please, cut in!
My Robert Rauschenberg Artcar used a whole bunch of techniques like this... so it is possible, but it took weeks!
If you get the path-ops plug in for Inkscape...
You would trace the entire image in one go, then you can use a rectangle shape, and the intersect tool to cut up pieces as you see fit, as in this old video I did...
That's an old version of Corel, so it looks different in inkscape, but the idea is the same.
Again, it can still take a long time to do, but it's how I did some of my Pink Floyd tribute car..
... again, it takes ages.
Last edited:
- 442
- Celina, Texas
- Tex_Hill
Awesome work!
Thank you for the help. Yeah, I was investing a lot of time, but still not getting below the 15kb threshold, so I started to get discouraged. That's why I reached out hoping that maybe I was missing something, or someone had a trick to lessen the work required.
- 17,680
- United Kingdom
I have a trick, but's a Rube Goldberg machine of trick, that uses CorelDraw, SVGOMG, Notepad, MS Word, MS Excel, and Pulovers Macro Creator... it actually works quite well for me I can now get done in 20 minutes what used to take me days... but it'd be a hot steaming mess if I shared it...
So...
To use...
1) Place the _template file on the car, you really only want to do all this once, so really make sure you're happy with the size and placing of the template before proceeding.
2) Once you're happy with the template, select it on the list, and use the replace option, to change it for the _bg file.
3) duplicate the _bg file, and replace it with the _1 file
4) duplicate the _1 file, and replace it with the _2 file
5) repeat for all the other files. Do them in order, take care not to move, rotate, skew ANY, if you got something that looks out of line, delete it, duplicate the one underneath and replace it again.
You should end up with something like the image above.
- 516
- Netherlands
I'm using Inkscape on Mac. I can load in a pic I want to convert, see the preview, but when I save it as optimised SVG or Plain SVG, all I get is either a complete white square or one with a red cross. Opening the white square just gives me some coding, but never the pic I tried saving. Happens with every pic I try to convert.
I followed the tutorial, but no dice. Is this a Mac thing? Fair chance I am doing something wrong, although I follow the tutorial.
I just don't understand how to get it right.
I followed the tutorial, but no dice. Is this a Mac thing? Fair chance I am doing something wrong, although I follow the tutorial.
I just don't understand how to get it right.
Last edited:
- 17,680
- United Kingdom
I don't use inkscape, or Macs, but it sounds possibly like it's trying to save the file with a path to the bitmap image in it, which it's not finding, make sure when you to the trace bitmap step, it's removing the original image, not leaving it in behind the trace.
- 516
- Netherlands
The tutorial says to remove the original image, which will be right underneath the traced one. Which I did and I am getting an image now. I imported it according to the tutorial, just like before, and now there is an image on the svg thumbnail. Big win for me!
It's also under 15kb, but now the GT7 sticker uploader says the format is not supported....
My battle isn't over yet..
This is the image. I uploaded it in svgomg, but it gives me a butchered result, so that's no option too.
Last edited:
- 17,680
- United Kingdom
- 516
- Netherlands
lol, this is completely beyond me, mate. No clue on what I'm looking at, let alone figure out how to fix this 😂
Oh well, I'll consider this as a nice attempt and maybe try some other day again.
- 891
- Amsterdam
- HennyGingerale
Converting an image to a vector is completely different than converting a .jpg to a .png. You really need to trace the image, which can be done by hand or autotrace. Im not sure if the latter is in Inkscape?
- 17,680
- United Kingdom
That's just the code that makes up the SVG file. Generally it's the easiest way of spotting why something might be failing in the uploader.
Honestly it sounds like you're simply selecting the wrong bit to save after it's done the trace.
It is, I think he's following the steps outlined much earlier in this thread, just not quite getting it right.
- 516
- Netherlands
I'll give it a try this weekend again. Maybe I'll try on a Windows laptop and see if there is a difference with the Mac version. Wouldn't surprise me a bit, tbh.
Oh well, thanks for the help so far, guys. 👍
Oh well, thanks for the help so far, guys. 👍
- 17,680
- United Kingdom
Post the image that you want to use, I'll do a video showing how you'd do it.
- 516
- Netherlands
This is the thing I want to create an svg from. I used the in game shapes to create it on the car (3 times), but want to have it as 1 svg, because it saves a lot of moving around shapes if I want to edit something on the car.
Very very much appreciated that you want to guide me through. I have no words.
- 17,680
- United Kingdom
No Audio but it's all in real time so you can see what I'm doing. Don't worry too much about how I use SVGOMG, I always go via notepad to eyeball the code, you can just download it.
Now, for the record, I hate auto tracing of logos, and the quality in this example is poor, It's really only just supposed to show you the process...
With that in mind I attached a very quick manual redraw, should be fine for your purposes.
- 516
- Netherlands
This is very helpful. Thanks a million. I'll ignore into it this weekend. Inkscape looks different on Mac, so I'll install it on an older Windows 10 laptop. So I can follow your moves exactly.
Again, many thanks!
- 3
- Germany
- deusdexa
Imported black SVGs appear lighter – any fix or explanation?
Hi everyone,
I'm new here, so please excuse me if this is the wrong section – and I wouldn't be surprised if this has come up before. If it has, I'd appreciate a quick link!
I've run into something odd when using custom SVG decals in GT7. Even when I use a clean SVG with a shape filled with pure black (#000000), it shows up slightly lighter in-game than the built-in black shapes from the decal editor.
After a bit of testing, I found that if I set an in-game shape to H = 0, S = 0, V = 11, it visually matches the imported black SVG. So it seems like GT7 might apply a minimum brightness or render imported SVGs with a slightly elevated value – even if the color is technically solid black.
Has anyone else noticed this or found a workaround to get true black in custom SVGs?
Thanks in advance – and happy designing!
Update: Imported SVG blacks are always lightened in GT7
After some deeper testing, I’ve confirmed that Gran Turismo 7 consistently adds approximately +11% Lightness to any color imported via SVG – regardless of whether the color is defined in RGB or HSL.
That means even if you use pure black like #000000 or hsl(0, 0%, 0%), the result in-game will appear as a slightly lighter gray. In fact, a shape created directly in the in-game decal editor with H = 0, S = 0, V = 11 matches the appearance of imported pure black – which suggests the game applies a base brightness to all imported SVG elements.
To visualize this, I created the image below: a set of horizontal SVG bars, all filled with values ranging from #000000 to slightly lighter shades like #010000, hsl(0, 0%, 1%), and hsl(240, 100%, 1%).
Despite being technically different, they all appear visibly brighter – confirming that true black cannot be achieved via SVG import.
If anyone has found a reliable workaround or a way to force absolute black in imported decals, I’d love to hear it.
Hi everyone,
I'm new here, so please excuse me if this is the wrong section – and I wouldn't be surprised if this has come up before. If it has, I'd appreciate a quick link!
I've run into something odd when using custom SVG decals in GT7. Even when I use a clean SVG with a shape filled with pure black (#000000), it shows up slightly lighter in-game than the built-in black shapes from the decal editor.
After a bit of testing, I found that if I set an in-game shape to H = 0, S = 0, V = 11, it visually matches the imported black SVG. So it seems like GT7 might apply a minimum brightness or render imported SVGs with a slightly elevated value – even if the color is technically solid black.
Has anyone else noticed this or found a workaround to get true black in custom SVGs?
Thanks in advance – and happy designing!
Update: Imported SVG blacks are always lightened in GT7
After some deeper testing, I’ve confirmed that Gran Turismo 7 consistently adds approximately +11% Lightness to any color imported via SVG – regardless of whether the color is defined in RGB or HSL.
That means even if you use pure black like #000000 or hsl(0, 0%, 0%), the result in-game will appear as a slightly lighter gray. In fact, a shape created directly in the in-game decal editor with H = 0, S = 0, V = 11 matches the appearance of imported pure black – which suggests the game applies a base brightness to all imported SVG elements.
To visualize this, I created the image below: a set of horizontal SVG bars, all filled with values ranging from #000000 to slightly lighter shades like #010000, hsl(0, 0%, 1%), and hsl(240, 100%, 1%).
Despite being technically different, they all appear visibly brighter – confirming that true black cannot be achieved via SVG import.
If anyone has found a reliable workaround or a way to force absolute black in imported decals, I’d love to hear it.
Last edited:
- 400
- 44.929139, 11.429361
I knew about the black issue but never found any fix other than apply the GT7 HSV to make it darker.
Looks like it's an HSV Value issue though; if the original is X_X_100 nothing changes, apparently: as in the pic below, layer 1 Inkscape HSV, smaller layer 2 GT7 HSV in the middle
But if the original Value is less than 100, you can clearly see the difference, the GT7 HSV layers in the middle are darker:
Last edited:
- 3
- Germany
- deusdexa
Thanks for the insight – it’s good to know others have run into the same issue.
I ended up solving it by simply recoloring the decal in-game, which works great for single-color shapes. Definitely a good workaround when black really needs to be black.
Of course, it gets tricky with multi-color decals where you can’t assign in-game color separately – in those cases, the lack of true black in imported SVGs is still a bit frustrating.
Appreciate your reply though – every bit of info helps!
- 17,680
- United Kingdom
On the colour issue, SVG uses sRGB colour space, the game must surely have it's own/different colour space covering an HDR gamut. It's just a guess, but I can easily imagine the issue arises when the system is importing SDR sRGB SVG to its own HDR system. HSV colours with a 'V' value of 100 in SDR can't be as 'strong' as HDR colours with a 'V' value of '100' (or else we wouldn't need HDR), but you can only have the same number of values if it's still only a 24-bit colour depth, so the SDR black can't be as strong as whatever HDR gamut the game uses.
The bottom line is you can't do anything other than define black as black in the SVG file. Maybe in future SVG will offer a HDR colourspace, this seems to be a known issue in general, but that would be out of PD or Sony's hands.
The bottom line is you can't do anything other than define black as black in the SVG file. Maybe in future SVG will offer a HDR colourspace, this seems to be a known issue in general, but that would be out of PD or Sony's hands.
