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

[syntex123]

This thread is going to be my lifeline when I get access to the uploader. Starting with zero knowledge of creating svg files so could be quite the process! lol

For simple logos this tutorial is excellent. But for more complex logos you need to manually trace. I'm yet to try, not too experienced myself.. But now after trying to make an easy one, it still was 64kb.. Hmm. I guess manually tracing it would bring the size down. Too lazy to try to learn that tonight, but I better do it soon, to make a second tutorial! In a few different applications, InkScape too..

I have a question that might be dumb but I have no experience with .svg files. So I downloaded some from my PC and when they save it saves the file as a complete webpage? Is that supposed to happen?

Nope.

 

[ScottPuss20]

https://www.autosport.com/f1/news/17271/fia-reiterates-stance-on-tobacco-ban

One I started making in the beta that I hope to finish once I get some 555 decals and the full game.

Yes I know that Tobacco sponsorship is illegal, but the post sounded as though PD had actually taken them out of the game on purpose. To me at least.

 

[Cytoria]

I wonder how PD will manage the "legal" aspect of SVG upload. Surely lots of player just want to add sponsors for accuracy or because they like the brand, and it will be good publicity, but what about tobacco brands liveries in FIA race championship ? License issues with brands who don't want to be used at all (you see me, Ferrari ?), etc...

 

[syntex123]

I wonder how PD will manage the "legal" aspect of SVG upload. Surely lots of player just want to add sponsors for accuracy or because they like the brand, and it will be good publicity, but what about tobacco brands liveries in FIA race championship ? License issues with brands who don't want to be used at all (you see me, Ferrari ?), etc...

Just a matter of banning custom liveries in those races like you can do in the lobbies.

 

[CaptainRisky21]

Would anyone be able to upload these:
Supercheap Auto
The Bottle-O
MightyMite

 

[syntex123]

Would anyone be able to upload these:
Supercheap Auto
The Bottle-O
MightyMite

If you don’t mind - post those requests here instead.

 

[CaptainRisky21]

If you don’t mind - post those requests here instead.

OK, thanks

 

[double A-ron]

So, looking through what’s been uploaded, there’s some that don’t look so great. People seem to be either not making sure the background is transparent (resulting in a white box around the logo) or they’re using .jpgs or other non vector images and trying to get rid of the background which is resulting in white artifacts around parts of the images or within the negative space of letters and then saving those as .svg. If you’re as picky as I am, I’d avoid those.

 

[DcamaxoG]

Thanks @syntex123 and all other members who helped building this useful thread about .svg

 

[Toshost]

please anyone

 

[syntex123]

View attachment 689363
please anyone

If you don’t mind - post those requests here instead.

 

[fikridroid]

https://graphicdesign.stackexchange...n-illustrator-cs6-when-i-use-image-trace-help
might be useful if anyone having transparency issues when tracing image in illustrator

 

[syntex123]

https://graphicdesign.stackexchange...n-illustrator-cs6-when-i-use-image-trace-help
might be useful if anyone having transparency issues when tracing image in illustrator

Nice. I found it easier just saving the image first, then re-open the saved image and click on the white parts and delete them.

 

[syntex123]

Curious. Is it possible to cut down anchor points / fewer paths without too big of a loss in quality when autotracing in Illustrator? Seems to me a few thousand paths is the reason the size of the svg is so big. I’ve seen more complex decals in-game than a few simple ones I’ve made, and was wondering how it’s possible to get a nice, rich in detail decal without passing 15kb.

 

[Frostfire83]

Has anyone noticed that some uploaded decals have "Skew" options and some do not? What properties to these .svg files have to have in order to be able to skew the image?

 

[SZRT Ice]

Has anyone noticed that some uploaded decals have "Skew" options and some do not? What properties to these .svg files have to have in order to be able to skew the image?

The uploader chooses if it's A: Skewable, mirrorable, & flippable. and if it's B. Colorable, during the in-game share/upload process.

 

[BarryB]

Curious. Is it possible to cut down anchor points / fewer paths without too big of a loss in quality when autotracing in Illustrator? Seems to me a few thousand paths is the reason the size of the svg is so big. I’ve seen more complex decals in-game than a few simple ones I’ve made, and was wondering how it’s possible to get a nice, rich in detail decal without passing 15kb.

I think you’ll find the most complex ones were probably hand traced.

 

[Frostfire83]

The uploader chooses if it's A: Skewable, mirrorable, & flippable. and if it's B. Colorable, during the in-game share/upload process.

I see... I think it would be better to have all of those options enabled imo. I remember having trouble with a batman logo that was uploaded because it had limited options which forced my design on the car to look terrible...

 

[Belifant]

Curious. Is it possible to cut down anchor points / fewer paths without too big of a loss in quality when autotracing in Illustrator? Seems to me a few thousand paths is the reason the size of the svg is so big. I’ve seen more complex decals in-game than a few simple ones I’ve made, and was wondering how it’s possible to get a nice, rich in detail decal without passing 15kb.

those autotracers usually create a lot of unnecessary anchor points, where you can easy remove most of them. A simple circle can be defined with just 4 anchor points, but autotracers often create hundreds of anchor points for a simple shape like this. Less anchor points actually makes for better quality, as long as you can mantain the shape.

 

[MatskiMonk]

those autotracers usually create a lot of unnecessary anchor points, where you can easy remove most of them. A simple circle can be defined with just 4 anchor points, but autotracers often create hundreds of anchor points for a simple shape like this. Less anchor points actually makes for better quality, as long as you can mantain the shape.

Depends what editor you use, but if you draw a circle as shape, and don't convert it to curves, it takes up even less space.

In SVG, a 4 point circle looks like this:

<path class="fil0 str0" d="M16078.3 36.8977c2680.91,0 4854.96,2174.15 4854.96,4854.96 0,2680.81 -2174.05,4854.96 -4854.96,4854.96 -2680.91,0 -4854.96,-2174.15 -4854.96,-4854.96 0,-2680.81 2174.05,-4854.96 4854.96,-4854.96z"/>

^that is 227 bytes

As an ellipse object the same circule looks like this:

<ellipse class="fil0 str0" cx="4891.96" cy="4891.86" rx="4854.96" ry="4854.96"/>

^that is 80 bytes, so not far off being a third of the size.

 

[DigitalBaka]

Depends what editor you use, but if you draw a circle as shape, and don't convert it to curves, it takes up even less space.

In SVG, a 4 point circle looks like this:

<path class="fil0 str0" d="M16078.3 36.8977c2680.91,0 4854.96,2174.15 4854.96,4854.96 0,2680.81 -2174.05,4854.96 -4854.96,4854.96 -2680.91,0 -4854.96,-2174.15 -4854.96,-4854.96 0,-2680.81 2174.05,-4854.96 4854.96,-4854.96z"/>

^that is 227 bytes

As an ellipse object the same circule looks like this:

<ellipse class="fil0 str0" cx="4891.96" cy="4891.86" rx="4854.96" ry="4854.96"/>

^that is 80 bytes, so not far off being a third of the size.

Indeed! Auto-tracing for me has been a mixed bag and it's not giving me a great quality or very accurate result in Inkscape. Probably down to my settings but I find that hand tracing is the way to go anyway. Far more time consuming for more complex images but I know I'm getting a quality result in the end and likely a far smaller file size due to the more simple shapes, lines and curves.

 

[syntex123]

I think you’ll find the most complex ones were probably hand traced.

I know. And I would manually trace if I knew how.

those autotracers usually create a lot of unnecessary anchor points, where you can easy remove most of them. A simple circle can be defined with just 4 anchor points, but autotracers often create hundreds of anchor points for a simple shape like this. Less anchor points actually makes for better quality, as long as you can mantain the shape.

Yes but how do you remove them?

 

[DigitalBaka]

I know. And I would manually trace if I knew how.

These are for Inkscape but I would bet the basics apply to Illustrator and others as well. I'm not great but I've gotten very friendly with the basic rectangle, polygon, ellipse and bezier/pen tools.

https://inkscape.org/en/learn/tutorials/

 

[double A-ron]

To reduce the number of achor points in Illustrator, you can either use the Delete Anchor Point Tool, or you can go to Object > Path > Simplify.

If anybody is looking for a really good way to learn the Pen Tool in Illustrator a great exercise is to place a copy of the Coca-Cola logo on one layer and lock the layer. Then create a brand new layer on top of the locked layer and select the Pen Tool and start tracing over logo using as few point as you can.

Illustrator takes time to learn and master. Creating vector graphics using the pen tool can be very finicky and may require a lot of trial and error. I've been using it for19 years and I'll admit, I haven't even come close fully mastered it. I could only dream of creating a vector image as good as this motorcycle.

 

[mokalovesoulmat]

I have theory but did not tried it yet: If you want to draw itasha-style graphics I suggest to draw ONLY the lines into the SVG and manually color them via built-in shapes.

Yes but how do you remove them?

Object > Path > Simplify (Illustrator)

 

[syntex123]

To reduce the number of achor points in Illustrator, you can either use the Delete Anchor Point Tool, or you can go to Object > Path > Simplify.

If anybody is looking for a really good way to learn the Pen Tool in Illustrator a great exercise is to place a copy of the Coca-Cola logo on one layer and lock the layer. Then create a brand new layer on top of the locked layer and select the Pen Tool and start tracing over logo using as few point as you can.

Illustrator takes time to learn and master. Creating vector graphics using the pen tool can be very finicky and may require a lot of trial and error. I've been using it for19 years and I'll admit, I haven't even come close fully mastered it. I could only dream of creating a vector image as good as this motorcycle.

Quite familiar with the pen tool in Photoshop but it seems to act differently in Illustrator. Which is why I haven't touched it

Object > Path > Simplify (Illustrator)

Tried that but that doesn't help at all. That totally messes it up almost always.

 

[DigitalBaka]

After you simplify see if you can go in and edit the nodes individually. Move them around and mess with the handles to get them looking better. Probably a good way to learn how to do it yourself as well.

 

[double A-ron]

Quite familiar with the pen tool in Photoshop but it seems to act differently in Illustrator. Which is why I haven't touched it

Tried that but that doesn't help at all. That totally messes it up almost always.

While it does act a bit different, it's worth trying the pen tool in Illustrator, you're learning curve may not be as bad as you think. I hated it at first, but the more I used it, the more I fell in love with it. It's all about trial and error.

 

[syntex123]

While it does act a bit different, it's worth trying the pen tool in Illustrator, you're learning curve may not be as bad as you think. I hated it at first, but the more I used it, the more I fell in love with it. It's all about trial and error.

I'm sure! I just need to know how to remove the "auto fill" that happens as I keep clicking my path. It fills automatically with white. I don't want that, I want to either fill or stroke when I'm done, which I also need to know how to do.

 

[double A-ron]

I'm sure! I just need to know how to remove the "auto fill" that happens as I keep clicking my path. It fills automatically with white. I don't want that, I want to either fill or stroke when I'm done, which I also need to know how to do.

to get rid of the auto fill of white (or whatever color is selected), look at the Tools pallet and at the bottom you'll see two squares that over lap, one solid, the other that with a "hole" in the middle. The solid square is your fill color and the "holed" square is your stroke color. You can press either one to bring forward. With the fill square in front, look beneath them and you'll see three smaller square buttons. Select the third one that should be a white square with a red hash mark through it and that will remove the fill color. Hopefully that makes sense.