- 16,460
- United Kingdom
User Decals - A Tutorial On How To Make .SVG (Request in separate thread)
- Thread starter daan
- 1,467 comments
- 351,245 views
- 307
- Colorado
Question about saving a SVG file. Does it matter how you save the file when you are finished? I was told that if I would save the file as a OPTIMIZED SVG that it would be smaller in file size than if I save it as a PLAIN SVG file. Is this right? I've always just saved it s a plain svg file and if the file size was to large I would then go to the SVGOMG website and make it smaller so I would be able to upload it. I'm having some trouble with some of my decals getting them under the 15kb limit so thats why I asking if there is another way to save the svg file to make it smaller so you can them upload it.
garystevens64
If it says svg not supported that's because the file is to large. Some even show as 15kbs but they are still actually too large just not read correctly by the program. If a file is bang on 15KBs that's to large, the SVGs have to actually be 14.9kbs and under to get on the PS servers .
Inkscape is all I ever use and do many different gradients on , as long as you save as a optimised svg and then run it through Vecta.nano no matter how small the file is it will keep it's gradients.
If you don't run it through vecta.nano you run the risk of bad nodes and or a black image.
Vectra.nano lowers the file but also makes the gradients work in GT7
Inkscape is all I ever use and do many different gradients on , as long as you save as a optimised svg and then run it through Vecta.nano no matter how small the file is it will keep it's gradients.
If you don't run it through vecta.nano you run the risk of bad nodes and or a black image.
Vectra.nano lowers the file but also makes the gradients work in GT7
- 16,460
- United Kingdom
If it's too large it says...
Not supported can be because of a number of other reasons. Bad XML, wrong SVG version, wrong number of bits in the file encoding (16-bit instead of 8-bit for example).
Not quite.
The maximum file size is 15,360 Bytes. 15,360 bytes dived by 1024 bytes in a kB = 15kB.. so the number you really want to be looking at is the size in bytes...
This file is exactly on the limit, 15,360 bytes, which equals 15kB exactly - 1 byte more and it won't upload. It shows in the status bar summary as 14.9kB...
The point being, go by the size in bytes, it must be 15360 or less.
This is interesting, it sounds like that program is re-writing matrix transforms in gradients, which would be a big plus for people struggling with how badly some programs write gradients. Out of curiosity, does it work with skewed radial gradients?
- 307
- Colorado
- 307
- Colorado
Question. To use vectra.io is there a cost to use this program or is it a free one? And if its is free how do you use it? Any help that you can give me would be greatly appreciated.
garystevens64
- 3,547
- Finland
No, it is free.
All you have to do is upload your SVG file and the website will then optimize the file. Then you just download it.
Afte uploading 7800 decals in to the game I'm quite up on what it takes and doesn't take.
As for vecta.nano yes it has worked for skewed gradients.
If you have issues with a file that is 14.9 but showing as 15kbs just pass it through vecta or svgomg once to knock it down a bit to see if it'll go through.
If ever have issues feel free to send to bigeasynz@gmail.com and I'll happily have a look at it and remake it if I can
Last edited:
- 16,460
- United Kingdom
Vectra.io/nano is totally free web program. Just drag and drop your svg in to it. Then scroll down and you'll see it there for download. The good thing about that site is it will show you the results if you expand the information. Also if it has changed the image it'll show you straight away. If the shrinkage is all ok then hit download.
It's a free web program, go give it a test with your gradients.
- 307
- Colorado
That is what happens to any gradients to which a transform has been applied, and without transform, you are stuck with circular radial gradients (right? I'd love to be wrong 🙂) Ellipses (2-axis radial gradients) are out, if you apply a radial gradient to a square, then stretch it so it is a rectangular radial gradient, the code uses 'transform' to stretch the gradient, but GT ignores transform when uploading the decal. Mesh warps, envelope, they all use transform to alter a radial (circular) gradient.
You can stretch and skew the decal once in the game, so in theory you can work backwards, create your decal, then stretch/skew so that all the radial gradients are circular, but that will only work if you have a single radial gradient, or exactly the same degree of stretch/skew applied to all radial gradients.
The centre of the circular gradient does not have to be the centre of your shape, I've been trying to use that to move away from an obviously circular shape, but it can be difficult to match the gradiations between 2 shapes:
I've shared a couple of pie slice gradients which are useful for the same sort of thing.
@bigeasynz Thanks for the heads up on that vectra.io website, look forward to using that 👍
- 16,460
- United Kingdom
I've been experimenting with layering circular radial gradients with different origins and of different transparencies to create non uniform looking radial gradients. It's not working and I'm not yet sure if it's Corel or GT that's not working. The theory does work if you upload them as separate decals, layer them up and adjust the opacity in game.. but I want to do them as one file. Problem is when I do, areas that are overlayed node for node and have transparency disappear completely.
Try making them in Inkscape.
I tried vecta.io on a file with multiple radgrads; it's smart enough to detect when radgrads are effectively the same, (black in centre, transparent at edge) so it defines a single radgrad and applies it to each shape, but uses matrix transforms on the shapes, and that breaks the grad just like a gradienttransform does.
I was sooo hoping vecta would be a magic bullet
It's good at compression, I guess it will convert to absolute co-ordinates if it is more efficient, but use matrix transforms if that is more efficient.Having said that, I'm guessing you've already inspected the code to rule out transforms? Sometimes it feels like GT is just ornery for the sake of it, I'll spend too long this evening trying to work out why my latest file isn't working despite defining everything without transforms (gah!!)
- 16,460
- United Kingdom
In all honesty, at the moment I can make do with workarounds for the odd skewed radial gradient if I need to do it. I'm working a livery that's got a bit a water colour wash-esque back ground so at the moment I'm just trying to combine as many gradients into one decal as I can to save layers and get smooth transitions in the x and y direction, most of my livery attention is on that.
Ok who's killed Vecta.io/nano ? 😂😂
- 16,460
- United Kingdom
It seems to work well for most scenarios, but this niche issue of skewed radial gradients seems to persist and I'm still of the opinion it can only be properly solved at PD's end.
For nearly everything else Corel has worked fine and it's mostly better for gradients than Inkscape, except for this issue I'm experiencing at the moment where if a fill has a transparency, and that fill is a gradient with a transparency, it either becomes solid, or invisible in GT7 - which I'll be able to work around, I just like to figure out why.
- 5
- Spain
Did you manage the alpha gradient thing? I'm also stuck there
- 16,460
- United Kingdom
- 1,535
- Japan
I'm stuck on a gradient problem. Could someone please help me?
I use well-known gradient methods and have always had success creating decals with more complex gradients than this file.
But for some reason, this file continues to produce broken gradients even though I've tried every editing method I can think of other than directly editing the xml.
Gradient correction tool: failed.
Save as optimized svg and upload directly: failed.
Save as optimized svg, convert and upload with Vecta.io/: failed.
I suspected that there was a problem with the path structure, so I manually deleted all unnecessary paths, filled in the hollow parts with paths to simplify it and tried all of the above methods, but it still didn't work. It's completely out of hand.
This is my first experience with something like this, and I have no knowledge of xml, so I'm completely stuck. Do you have any ideas?
I use well-known gradient methods and have always had success creating decals with more complex gradients than this file.
But for some reason, this file continues to produce broken gradients even though I've tried every editing method I can think of other than directly editing the xml.
Gradient correction tool: failed.
Save as optimized svg and upload directly: failed.
Save as optimized svg, convert and upload with Vecta.io/: failed.
I suspected that there was a problem with the path structure, so I manually deleted all unnecessary paths, filled in the hollow parts with paths to simplify it and tried all of the above methods, but it still didn't work. It's completely out of hand.
This is my first experience with something like this, and I have no knowledge of xml, so I'm completely stuck. Do you have any ideas?
- 16,460
- United Kingdom
See if the attached file works. Looks alright in the uploader but I can't check in game.
- 1,535
- Japan
Thank you! Displayed correctly!
Could you please let me know what modifications you made to this file for future reference?
- 16,460
- United Kingdom
I directly changed the XML. It was one of two things, if you open your file in Notepad or similar ... you will see the structure of the file is as follows:
Header info
Path coordinates followed by a bunch of style elements
Gradient definitions in <def>...</def> tags.
I believe that the gradient definitions have to go before where you use them, so I changed it to:
Header info
Gradient definitions
Path coordinates
I also deleted all the style elements that were part of the path. The only one you need is the fill attribute, and generally I'd put that at the start of the path tag.
Not sure which of those things will have made it work to be honest.
This is your code below, for ease of reading I've clipped out all the path co-ordinates:
SVG:
<svg width="87.199" height="69.205" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="... CLIPPED ..." color="#000000" color-rendering="auto" dominant-baseline="auto" fill="url(#a)" image-rendering="auto" shape-rendering="auto" solid-color="#000000"
style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<defs>
<linearGradient id="a" x1="38.073" x2="38.073" y1="-.053293" y2="63.157" gradientUnits="userSpaceOnUse">
<stop stop-color="#f00" offset="0"/>
<stop stop-color="#f00" stop-opacity="0" offset="1"/>
</linearGradient>
</defs>
</svg>With my changes it becomes this:
SVG:
<svg width="87.199" height="69.205" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a" x1="38.073" x2="38.073" y1="-.053293" y2="63.157" gradientUnits="userSpaceOnUse">
<stop stop-color="#f00" offset="0"/>
<stop stop-color="#f00" stop-opacity="0" offset="1"/>
</linearGradient>
</defs>
<path fill="url(#a)" d="... CLIPPED ..." />
</svg>
Last edited:
- 1,535
- Japan
Thank you very much. I did not understand of the content a little due to my ignorance, but your explanation was easy to understand and the comparison helped me visually understand the mistake I made.
If I encounter a similar problem in the future, I will try to correct it with your explanation. Thank you so, so much!
