Tried Inkscape and Plain SVGs and it gave me the same thing.
Check out if you have a layer with that png image, you should remove it before saving the svg file.To be specific, what I have is essentially a .dds file that's been chopped up, converted into a .png, compressed, and converted into an .svg in Inkscape. Not sure if there's anything in there that the uploader doesn't like.
I'll check the image again to see if anything weird is going on.
I'm getting a real headache trying to figure out the gradient stuff myself, even after reading through the pages here. I definitely need help with this file.
It just shows up as black with no gradient.. Meh.What problem are you getting?
Also... https://www.gran-turismo.com/gb/gtsport/user/notifications/decal/3518385/4612328139881711112
It just shows up as black with no gradient.. Meh.
Ah nice, thanks. I'll use yours then I tried searching for it before beginning to make it but only one showed up and it looked like crap in-game.
Hello guys,
I would be very gratefl f ayone can write step by step what to do to upload SVG file to GT Sport community. I upload thourgh the website my svg file and I can see it there but when I try to open it in the game there is only empty background.
I was trying to use SVGOMG but looks I do something wrong, maybe choosing something what should not be choosen.
Repeat and mirror do work with gradients, at least with Inkscape, that's how I do the carbon pattern.I've had mixed luck with gradients...basic ones associated with a shape seem to work fine even opacity. I was hoping to use spreadMethod "Repeat" or "Mirror" to tile gradients for higher detail patterns, but haven't been successful getting one that renders in game.
If you mean svg symbols as font characters you need to convert them to path.I've also been exploring svg symbols, but he game doesn't seem to support them either. File sizes would come down a LOT if we can use repeating symbols, patterns, and gradients in our files.
If you mean svg symbols as font characters you need to convert them to path.
Repeating symbols and patterns will increase the file size a lot if you put a lot of them, it isn't the case of gradients though because there aren't more nodes.
There's a number of ultimate reasons why it shows up black, but it's a consequence of the same thing. GTS doesn't understand the way the gradients are written in the XML and ignores them.
I've had mixed luck with gradients...basic ones associated with a shape seem to work fine even opacity. I was hoping to use spreadMethod "Repeat" or "Mirror" to tile gradients for higher detail patterns, but haven't been successful getting one that renders in game.
I've also been exploring svg symbols, but the game doesn't seem to support them either. File sizes would come down a LOT if we can use repeating symbols, patterns, and gradients in our files.
GTS appears to struggle with anything other than a simple 0 or 90 degree gradient. I've been trying to recreate the ARC Magic logo which has a 60 degree three colour gradient (Red-White-Green or [R-W-G]) accross the letters 'ARC'. I can recreate the logo fine on the computer and it shows up fine on the GT website but in the game results are mixed:
The first problem is that the game reverses the angle of the gradient so it shows up [G-W-R] - Easy fix, reverse the gradient from 60 deg to -60deg (sure it looks wrong in the library, but as long as its good in the game no problem).
Next it appears to set the origin point of the gradient wrong, cutting off most of the first colour (regardless of direction above) and having a bigger amount of the final colour resulting in [-W-GGG] or [-W-RRR] etc.
As I only needed the logo to appear small on the chosen car I ended up compromising (including losing some small text that doesn't even show up at the scale I require) and going with a simple 90 deg angle. This shows up exactly as intended and doesn't even require reversing for the game. Proving (??) one theory that GTS can't handle anything other than 0, 90 or 45 deg gradients.
This would be an incorrect conclusion. GTS, in my experience, will work fine with linear gradients at any angle, as well as radial and linear gradients with padding or different mid-points.... but GTS does need it written cleanly and simply in the code. It doesn't like it when certain 'ways' of writing the code are used, and this depends more on the application you're using than anything else, though the tips posted earlier do help.
I'm still using Corel which does a good job of keeping the code simple, except for one minor thing - so every gradient I make I have to change a couple of little things in the code. It's only a 30 second job though.
The angle, and sequence, of a gradient should (in my experience) be set simply by the start and finish co-ordinates, with midpoints and colour changes set as colour stops. the resultant angle of the gradient is therefore simply only defined by differences in x and y values.
Edit, to clarify, your app is writing the co-ordinates of the gradient as it is initially applied. It then applies transformations to this to get it to look how you want. GTS doesn't work with these transformations, and so ignores them (if it relates to co-ordinates), or shows them as black (if it relates to styles). The result of that is that it applies a gradient, almost in its default state.
If you look at the SVG and you've got an x-link tag anywhere in the fill styles, it's a good sign your app is taking shortcuts that GTS won't like.
I'll have a look at the code tonight and see if I can spot anything. Can the xlink tage be removed?
Still doesn't really explain why the same gradient applied at 60deg gets reversed and at 90deg is ok (thats the only change not moving shapes or anything else)??
I'll have a play tonight, I've just had a look at the code for the decal I've uploaded with the 90deg gradient. there is an xlink code but also a gradient transform code. I suspect neither are helping. What I'll try and do is apply the 60deg gradient in the software then remove the transform code and adjust the co-ordinates manually.
Edit: Just had a play at code level, took out the transform controls and adjusted the coordinates manually using % values. I'm still yet to get my head around each coordinate's function as entering obvious values didn't give the desired results and I can't seem to find a visual representation online, but with some trial and error I've managed to match the gradient I want. I've uploaded and will test the file in-game when I get home.
I did briefly drop the SVG into Illustrator and saw that angles are handled differently what was a 60deg angle in Autodesk Graphic was only a 30deg in Illustrator.
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32.6619mm" height="18.5551mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 11.4115 6.48283"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="3.1733" y1="6.50159" x2="3.26198" y2="-0.0596746">
<stop offset="0" style="stop-color:#1F1A17"/>
<stop offset="0.180392" style="stop-color:#3F3B39"/>
<stop offset="1" style="stop-color:#605D5C"/>
</linearGradient>
<linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="7.60201" y1="6.53307" x2="7.69089" y2="-0.0450354">
<stop offset="0" style="stop-color:#5A0000"/>
<stop offset="0.180392" style="stop-color:#AC0000"/>
<stop offset="1" style="stop-color:red"/>
</linearGradient>
<linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="7.80577" y1="4.1914" x2="3.45085" y2="2.24269">
<stop offset="0" style="stop-color:yellow"/>
<stop offset="0.94902" style="stop-color:#8F8D0B"/>
<stop offset="1" style="stop-color:#1F1A17"/>
</linearGradient>
</defs>
<path fill="url(#id1)" d="M9.47641 0.00524074l1.93509 0 -2.35215 5.08823c-0.268466,0.603489 -0.812489,1.25456 -1.87846,1.38936 -0.873736,0 -2.42863,-0.0238279 -3.2995,-0.0300818l2.91811 -6.44751 2.6769 0z"/>
<path fill="url(#id0)" d="M4.03792 6.45275c-1.07718,-0.00772136 -1.62725,0.00104815 -2.71439,-0.00918876 -1.68776,-0.0192859 -1.43586,-1.10045 -1.00531,-2.13333l1.13109 -2.71355c0.424186,-1.01768 1.27577,-1.60856 1.96727,-1.59144l3.38293 0 -2.76159 6.44751z"/>
<path fill="url(#id2)" d="M6.81464 0.0011879c-0.97656,0.0534905 -1.74279,0.510343 -2.29869,1.37052 -0.602545,1.17298 -1.11778,2.37479 -1.69625,3.64242 -0.308994,0.926074 0.0444415,1.39526 1.07159,1.41993 1.04514,-0.0329118 1.83195,-0.530922 2.34673,-1.48163 0.754981,-1.59284 1.52341,-3.23909 2.30648,-4.95124 -0.655512,-0.00412272 -1.28604,0.00412272 -1.72986,0z"/>
</svg>
<svg width="12" height="4" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="G">
<stop offset="0%" style="stop-color:red"/>
<stop offset="20%" style="stop-color:brown"/>
<stop offset="40%" style="stop-color:yellow"/>
<stop offset="60%" style="stop-color:blue"/>
<stop offset="80%" style="stop-color:green"/>
<stop offset="100%" style="stop-color:purple"/>
</linearGradient>
</defs>
<rect fill="url(#G)" x="0" y="0" rx="0" ry="0" width="12" height="4"/>
</svg>
fill="url(#THEGRADIENTNAME)"
Just come to the Inkscape side, you don't need to edit the XML code for gradients there, if I had to edit the XML code in this example ...
https://www.gran-turismo.com/es/gtsport/user/notifications/decal/3536029/6134567904076660752
... it would be a nightmare, but first I would need to know how to edit the XML code because I have no idea.
Nice work.
Editing my old Corel XML is only a 30 second job, and strictly speaking I don't need to do it. It falls over because GTS decal uploader doesn't seem to like gradients being defined in embedded style sheets which is what Corel does by default. I could switch it to write the style into each path, which means I then wouldn't need to edit the XML -- but that leads to bigger file sizes, so I'm just used to doing it this way.
I'd actually assumed @BLiTZ was already using Inkscape?
I like the way inkscape handles tracing, and I like the way you have direct control over decimal accuracy, but I don't find it that easy to use and in my limited experience, the XML it chucks out is a mess - this shouldn't really bother me so long as it works, but it does
Thanks. 👍Nice work.
Editing my old Corel XML is only a 30 second job, and strictly speaking I don't need to do it. It falls over because GTS decal uploader doesn't seem to like gradients being defined in embedded style sheets which is what Corel does by default. I could switch it to write the style into each path, which means I then wouldn't need to edit the XML -- but that leads to bigger file sizes, so I'm just used to doing it this way.
I'd actually assumed @BLiTZ was already using Inkscape?
I like the way inkscape handles tracing, and I like the way you have direct control over decimal accuracy, but I don't find it that easy to use and in my limited experience, the XML it chucks out is a mess - this shouldn't really bother me so long as it works, but it does
@BLiTZ, there's Inkscape for OS X if you want to give it a try.No, I'm currently using Autodesk Graphic (formally iDraw) on Mac OS. It's not great especially at combining shapes (circles seem to lose their shape very easily) but it was only £25 and at the time for the little vector stuff I actually made it did the job.
I learnt Macromedia FreeHand at uni and had a working copy until the year before last when my Snow Leopard MacBook Pro died (Freehand relies on Rosetta to run PowerPC emulation and wont run on newer Mac OS's without running versions of Snow Leopard Server on VMWare etc). I can't justify the money for Illustrator on my home computer at the moment and haven't been blown away by Affinity Designer (perhaps when then allow handles to snap to grid I might, bloody basic thing that they refuse to add), though for the money it's not a bad alternative. Gravit is another option but is online-only for the most part. EDIT: Tell a lie, Gravit has now released the desktop version of the app (its FREE too!!) for most platforms so I'll be giving that a try at some point!
Thanks. 👍
Everyone uses the software he/she is used to, and it's not easy to shift to another software due to the learning curve and the time spent on it, anyways once get used to, it becomes second nature, just like heel and toe downshifting as analogy.
The most counterintuitive graphic software I've used are Blender (shifting from 3DS Max) and Photoshop, both in another league and not specifically vector editor related, there's no steep learning curve with Inkscape if you compare to them.
Sweet days were those with Deluxe Paint for a Commodore Amiga where everything was easy but not so powerfull.
I'm still amazed on how freeware like Inkscape, Blender or Gimp can be so powerfull up to a point to rivalize with Illustrator, 3DS Max or Photoshop.
Thinking I might have more control over gradients in Inkscape, I started playing around with it with the idea I might be able to take something I already worked out in Illustrator and apply the relevant gradient tweaks (primarily repeating or reflecting fills, which I couldn't figure out how to do in Illustrator) in Inkscape (to minimize my need for editing the svg code directly). So far, any repeating gradient fills I've added in Inkscape have not shown up in game.