User Decals - A Tutorial On How To Make .SVG (Request in separate thread)

  • Thread starter daan
  • 1,493 comments
  • 385,161 views
p78
So i've learned loads already, (thanks to @Maninashed), but you can always learn new stuff.

Q: i pasted a bunch of letters together in inkscape. and now i need to group them together so i can edit it as a whole, is this possible?
i've seen there is a group together, but as of right now i am clueless :)
If each letter is a single path and the same style (color, stroke) all letters can be combined to a single path. Highlight them all and use [path] [combine]
Maybe easier to post your svg here or in PM in case your object list is complicated.
Grouping paths lets you work with multiple paths as a whole, however they remain separate paths. VIDEO
 
daan,
Inkscape question about creating a circle. Somehow I've changed the default settings for the circle. When I try to create one now it comes up looking like a backwards pacman. How do fix this problem?

garystevens64
 
daan,
Inkscape question about creating a circle. Somehow I've changed the default settings for the circle. When I try to create one now it comes up looking like a backwards pacman. How do fix this problem?

garystevens64
You can click this.
pacman.png

Then double click the create circles tool and pick take from selection. Future circles will maintain that setting.
Double click on allot of the tools is a great way to carry styles over for making other objects. It will remember fill and stroke colors plus the stroke width and style.
 
Last edited:
Then double click the create circles tool and pick take from selection. Future circles will maintain that setting.
Double click on allot of the tools is a great way to carry styles over for making other objects. It will remember fill and stroke colors plus the stroke width and style.

Ok I'll try this out tonight and let you know how it works and thank you so much for responding so quickly.

garystevens64
 
Things I tried and did not work with Inkscape. First I saved your above affinity designer text from above as svg. Looked O.K in Inkscape.
-Re saved as optimized.
-Removed gradient then reapplied
-Cut then past into new file re apply gradient. This had half yellow half black square.

Have you tried the other way? . Make it in affinity. Use Picta to add gradient. Or post a plain svg from Affinity here and I'll see if I can apply gradient with Inkscape. The Code literate members here may know how to rewrite it but a code free workaround maybe possible (or not). With several searches I have been unable to find anyone getting a working gradient in Gtsport with Affinity.

Thanks a lot Maninashed. It's no biggie for me to use Graphic instead of Affinity - was just surprised the more "powerful" of the 2 can't upload a gradient to GTS. have tried text and works well (as long as you remember to convert to curves!) but nothing else so far.
I haven't tried it the other way around - even if it worked it would be more effort than just using Graphic.

Here's the Affinity file for a plain mid-blue square, no gradient, no stroke:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 825 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-642.875,-568.912)">
<rect x="642.875" y="568.912" width="824.288" height="824.288" style="fill:rgb(0,94,255);"/>
</g>
</svg>

There are 4 options when exporting to SVG - For export (which is the one above), for print, for web and flatten.
Thanks again.:cheers:

EDIT - three of the four squares successfully uploaded to GTS and displayed fine in decals library on the PS4. The "flatten" version wouldn't upload as it was an invalid SVG format.
 
Last edited:
Thanks a lot Maninashed. It's no biggie for me to use Graphic instead of Affinity - was just surprised the more "powerful" of the 2 can't upload a gradient to GTS. have tried text and works well (as long as you remember to convert to curves!) but nothing else so far.
I haven't tried it the other way around - even if it worked it would be more effort than just using Graphic.

Here's the Affinity file for a plain mid-blue square, no gradient, no stroke:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 825 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-642.875,-568.912)">
<rect x="642.875" y="568.912" width="824.288" height="824.288" style="fill:rgb(0,94,255);"/>
</g>
</svg>

There are 4 options when exporting to SVG - For export (which is the one above), for print, for web and flatten.
Thanks again.:cheers:

EDIT - three of the four squares successfully uploaded to GTS and displayed fine in decals library on the PS4. The "flatten" version wouldn't upload as it was an invalid SVG format.
Adding a gradient to your blue square file in Inkscape worked fine.
 

Attachments

  • affin2grad.svg
    578 bytes · Views: 26
Last edited:
I have another Inkscape question I'm hoping you can help me with. I was trying to convert this logo (Eisenmann Exhaust Systems) from it original color of blue to red & also making some other little changes. After I've completed everything and saved it I then ran it through the SVGOMG Editor to decrease size. Its there I notice that none of the changes I made where there. it still showed up as the original file. I've uploaded the file so you can see what I'm talking about.

garystevens64
 

Attachments

  • Eisenmann Exhaust Systems Logo - blue.zip
    1.8 KB · Views: 26
I have another Inkscape question I'm hoping you can help me with. I was trying to convert this logo (Eisenmann Exhaust Systems) from it original color of blue to red & also making some other little changes. After I've completed everything and saved it I then ran it through the SVGOMG Editor to decrease size. Its there I notice that none of the changes I made where there. it still showed up as the original file. I've uploaded the file so you can see what I'm talking about.

garystevens64
Make sure that svgomg is opening the same file that you have modified and saved, rather than the original. Use "save as" and rename file to make sure you are working with the modified one, Wasted half an hour fixing a gradient once, because I kept uploading the same non fixed one on the gtsport page. If other weird things seem to be happening I usually copy paths and paste them into a new document. Here is yours with all the letters of the two styles combined, making it two paths instead of two groups of individual paths for each letter.
 

Attachments

  • Eisenmann red.svg
    4.1 KB · Views: 24
Thank you so much but what was I doing wrong? Normal what I do is go to my svg file select it to open in Inkscape and before I even go into inkscape i move the original file out and put it into another file. That way I don't have any problems mixing up the files. The other thing was the original file had part of the text in grey and I wanted to change that to black. But every time I would run it through SVGMO it would show the grey text instead of the black. Once again thanks for your help. So are you the new person to send these types of questions instead of daan?

garystevens64
 
Thank you so much but what was I doing wrong? Normal what I do is go to my svg file select it to open in Inkscape and before I even go into inkscape i move the original file out and put it into another file. That way I don't have any problems mixing up the files. The other thing was the original file had part of the text in grey and I wanted to change that to black. But every time I would run it through SVGMO it would show the grey text instead of the black. Once again thanks for your help. So are you the new person to send these types of questions instead of daan?

garystevens64
If you want someone in particular , type an @ in front of their username a drop box should appear and pick user. That way they should get an alert. I only use Inkscape so am happy to try and help if I can.
Not sure what was going on with your black and grey . I downloaded your above file (no longer need to zip the svg, we can just upload them now) Changed the grey to black and it worked. The only thing I can think of is that you had two copies of the new file you were working on in different folders and SVGOMG was pointed to the one that had not been changed. If there was another reason for it to happening, I cannot recreate it.
 
So are you the new person to send these types of questions instead of daan?
This is a forum. Questions aren't usually directed at anyone in particular and are just answered by anyone.

You just latched on to me as I responded to you.
 
It worked fine. Thank you so much for you help with this. How hard it is to put text on a circle? I've tried a while ago and all it would do is link the two objects together & I got to frustrated and gave up. I looked it up on YouTube but its a pain when you have to start stop and rewind all the time. Anyway thanks again.

garystevens64
 
It worked fine. Thank you so much for you help with this. How hard it is to put text on a circle? I've tried a while ago and all it would do is link the two objects together & I got to frustrated and gave up. I looked it up on YouTube but its a pain when you have to start stop and rewind all the time. Anyway thanks again.

garystevens64
Draw circle .
Type your text and with both selected use [text] [put on path]. Flip circle horizontally or vertically to put text inside circle, if needed. At this stage you can still change font letter spacing etc. Change circle size or shape and text will adjust.
Most videos don't tell you to convert text to path as most svg viewers show text fine. Once converted to path it is independent from the circle.
 
Although if have learned a lot, i lack the knowledge to turn this into a <15kb svg

i already shrunk it down (came from 800kb btw) in inkscape en svgomg


tnx
 

Attachments

  • B&W wrap (1).svg
    109.7 KB · Views: 28
Last edited:
p78
Although if have learned a lot, i lack the knowledge to turn this into a <15kb svg

i already shrunk it down (came from 800kb btw) in inkscape en svgomg


tnx
Lots of redundant nodes. Simplifying what is there would take a very long time to keep quality. Probably just as quick for me to manually retrace your original picture. Could you upload that.
 
Hey guys, I finally updated to a modern laptop and I'm curious about getting into the decal making game. How much of this stuff is done with free programs? And I mean completely free, not free 30 day trials and then you reset with a new e-mail to keep going. When I see some custom liveries they have shapes perfectly aligned with the body contours of the car. Is that something done in an editor? I'm curious about this type of decal work more than recreating logos and other designs in .svg. You guys are geniuses with this stuff and I'd be grateful to absorb just the tiniest amount of that knowledge
 
Hey guys, I finally updated to a modern laptop and I'm curious about getting into the decal making game. How much of this stuff is done with free programs? And I mean completely free, not free 30 day trials and then you reset with a new e-mail to keep going. When I see some custom liveries they have shapes perfectly aligned with the body contours of the car. Is that something done in an editor? I'm curious about this type of decal work more than recreating logos and other designs in .svg. You guys are geniuses with this stuff and I'd be grateful to absorb just the tiniest amount of that knowledge
Inkscape is 100% free. It has lot's of video tutorials , like this playlist.
It is the only program I use.
Matching car contours can not be automated, but you can learn various techniques once the basics have been absorbed.
 
I need some help with this decal. I have no idea whats going on with it. When viewing it in Inkscape it all looks fine but when I run it through SVGOMG to reduce size, its all different colors. If you could help me out with this I would be greatful. Let me know how I can fix it please. Thanks for all of your help.

garystevens64
 

Attachments

  • Neal Chance Racing Converters Logo - red.svg
    24.5 KB · Views: 22
I need some help with this decal. I have no idea whats going on with it. When viewing it in Inkscape it all looks fine but when I run it through SVGOMG to reduce size, its all different colors. If you could help me out with this I would be greatful. Let me know how I can fix it please. Thanks for all of your help.

garystevens64
Toggle the remove style elements (2nd last setting) in svgomg.
There are several groups and some redundant paths in the file. Letters are separate so stroke and fill is defined many times (using up kb)
If you combine same style paths in Inkscape so that all small red lettering with black stroke is one path. Big red lettering with thicker black stroke is one path etc. It would probably get under 15kb without svgomg. What program are you using to scan with? Or maybe it is a converted *.eps or imported *.ai file.
 
Special request, need a SVG of

Moby's Dicks
ARL

Thanks in advance as you guys Rock!!!
Are you asking for someone to design a logo? If so, some suggestions for font, color, picture or theme would help. Not really sure what you are after.
However did knock this up for your consideration.
 

Attachments

  • moby's2grads.svg
    14.5 KB · Views: 29
Are you asking for someone to design a logo? If so, some suggestions for font, color, picture or theme would help. Not really sure what you are after.
However did knock this up for your consideration.

Looks good, colors are perfect for the livery I made, the only problem is when I try to upload it in the GT Community website it fails to upload it.

Can you also do one in red, white and blue.

Thanks,
Steve
 
Looks good, colors are perfect for the livery I made, the only problem is when I try to upload it in the GT Community website it fails to upload it.

Can you also do one in red, white and blue.

Thanks,
Steve
Uploads fine for me. Try again, if still no luck try a different browser or device. Here is the text in red,white and blue.
 

Attachments

  • moby's3grad.svg
    14.6 KB · Views: 21
I need some help with this Decal. I'm using Inkscape & trying to put text on a path but I'm having a little trouble with it. If you can help me out with this I would greatly appreciate it. Let me know how to fix this problem please.

garystevens64
 

Attachments

  • STP Logo .svg
    6.4 KB · Views: 23
  • STP Logo.svg
    6.8 KB · Views: 19
I need some help with this Decal. I'm using Inkscape & trying to put text on a path but I'm having a little trouble with it. If you can help me out with this I would greatly appreciate it. Let me know how to fix this problem please.

garystevens64
When text is put on path it is still in text format, so it still needs the object to path function to work in GTSPORT.
Your top text was longer than the stroke path it was put on, so it had dropped the last word off. I removed text from path and shrank it and then put it back on. At this stage if you highlight the stroke line only, you can move the stroke around and change its shape (curve) with the node tool. The text will follow this line around and re-bend to any shape adjustment. You can also highlight the text only (using the font tool) change px height of font or even change the font. Can also vary distance between letters and words. Once you are happy with the positioning use the object to path on the text only. Then you can delete the stroke path. (I usually un-group the letters and combine to a single path to keep file size down)
May want to remove stroke from the small lettering or change to white as it appears blurry in the livery editor.
 

Attachments

  • STP Logo4.svg
    14.7 KB · Views: 22
When text is put on path it is still in text format, so it still needs the object to path function to work in GTSPORT.
Your top text was longer than the stroke path it was put on, so it had dropped the last word off. I removed text from path and shrank it and then put it back on. At this stage if you highlight the stroke line only, you can move the stroke around and change its shape (curve) with the node tool. The text will follow this line around and re-bend to any shape adjustment. You can also highlight the text only (using the font tool) change px height of font or even change the font. Can also vary distance between letters and words. Once you are happy with the positioning use the object to path on the text only. Then you can delete the stroke path. (I usually un-group the letters and combine to a single path to keep file size down)
May want to remove stroke from the small lettering or change to white as it appears blurry in the livery editor.

Ok. I'll try it out and if I still have any problems I'll let you know. Thanks again for your help and getting back to me so quickly.

Garystevens64
 
Back