Decal making progress questions

[Kobayashiiii]

OK, straight to the point, I got 2 questions.

First I saw a lot of people can easily draw a full body CG and upload in one decal. But when I post, I have to spread one CG to several decals. How you guys compress the decals?

Like the CG above, I have to spread it to 3 pieces or it will be way above 15kb. But others can do CGs such as the one below and under 15kb, how is it work?

Second is that how you guys speed up your decal making progress? I usually take more than 2 hours to draw one decal, but I see a lot of people can upload up to 50 decals one day. What app can I use to speed up?

 

[SportCoaster]

I'd actually like to know, too. How DO people manage to make Decals of full characters without relying on flat color templates or multiple Decals as parts?

 

[MatskiMonk]

@Kobayashiiii

If you upload one of you SVG files we might be able to point out if there's anything obvious you can do about the file size.

This thread covers some of the basics

Looking for other anime decal creators and tips

Hey all, brand new to the forum but I did some digging here and in GTS forums before making this thread. I'm interested in creating my own itashas and decals in GT7, but it seems like waifu decals are about as complex as decals get in this game. I already know how to use Inkscape and the basic...

www.gtplanet.net

On the time it takes.. I can only recommend practice!

 

[Kobayashiiii]

@Kobayashiiii

If you upload one of you SVG files we might be able to point out if there's anything obvious you can do about the file size.

This thread covers some of the basics

Looking for other anime decal creators and tips

Hey all, brand new to the forum but I did some digging here and in GTS forums before making this thread. I'm interested in creating my own itashas and decals in GT7, but it seems like waifu decals are about as complex as decals get in this game. I already know how to use Inkscape and the basic...

www.gtplanet.net

On the time it takes.. I can only recommend practice!

Ok so I upload one made 1 month ago. My output option in Numeric percision is 1, this file haven't been compressd by SVGOMG. This is the only full svg I could found. Others I made them and directly output them into several pieces. Usually I hide the ugly part down other layers, output with a small numeric percision and still I got a file over 30kb and some times when it comes to the ones have lots of details, it could easily go over 50kb

 

[MatskiMonk]

Ok so I upload one made 1 month ago. My output option in Numeric percision is 1, this file haven't been compressd by SVGOMG. This is the only full svg I could found. Others I made them and directly output them into several pieces. Usually I hide the ugly part down other layers, output with a small numeric percision and still I got a file over 30kb and some times when it comes to the ones have lots of details, it could easily go over 50kb

Looks like you're already doing the basic stuff then, and it's drawn fairly efficiently.

Looking at the way the XML is written, there's a lot of this going on..

<path d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M738.5,245.7l-2.4,24.7" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>

.. you see that the transform and path style (transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4") is repeated over and over again, 77 times in your file, that's ~8kb on its own.

So there's two things to do.

Firstly, the transforms don't do anything, and even if they did, they're likely a waste of kb's. I'm not sure how you go about getting rid of them, I'm sure it will depend what application you're using - I'm guessing something like an 'apply transforms' option?

Secondly, the line style details could be done using a style sheet - that way you define it once, and just reference it. How to achieve this will again depend on your software. In mine there's an option to use 'internal style sheets', instead of 'presentation attributes'...

You can also have non-contiguous paths, so for instance all the lines on the hair braid could be 'welded' into one path, that way it will use the line style details much less often. Again, this option might be called something different in your software.

Using a style sheet would make that block of code above look more like this... (this is representative only the syntax might not be quite right)

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z"/>
<path class="a" d="M738.5,245.7l-2.4,24.7"/>
<path class="a" d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z"/>
<path class="a" d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z"/>
<path class="a" d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z"/>
<path class="a" d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z"/>
<path class="a" d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z"/>
<path class="a" d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z"/>
<path class="a" d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

.. and if the paths were all welded into one, it would become something like this.

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z M738.5,245.7l-2.4,24.7 
M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z 
M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z
M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

The chunks of code I've used as an example here go from 1811 bytes (in your file), to 783 bytes... (56% saving)... and that can be achieved by making sure your software is being efficient.

The TL;DR is that you need to get your software to write 'cleaner' code.

 

[Kobayashiiii]

Looks like you're already doing the basic stuff then, and it's drawn fairly efficiently.

Looking at the way the XML is written, there's a lot of this going on..

<path d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M738.5,245.7l-2.4,24.7" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>

.. you see that the transform and path style (transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4") is repeated over and over again, 77 times in your file, that's ~8kb on its own.

So there's two things to do.

Firstly, the transforms don't do anything, and even if they did, they're likely a waste of kb's. I'm not sure how you go about getting rid of them, I'm sure it will depend what application you're using - I'm guessing something like an 'apply transforms' option?

Secondly, the line style details could be done using a style sheet - that way you define it once, and just reference it. How to achieve this will again depend on your software. In mine there's an option to use 'internal style sheets', instead of 'presentation attributes'...

You can also have non-contiguous paths, so for instance all the lines on the hair braid could be 'welded' into one path, that way it will use the line style details much less often. Again, this option might be called something different in your software.

Using a style sheet would make that block of code above look more like this... (this is representative only the syntax might not be quite right)

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z"/>
<path class="a" d="M738.5,245.7l-2.4,24.7"/>
<path class="a" d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z"/>
<path class="a" d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z"/>
<path class="a" d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z"/>
<path class="a" d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z"/>
<path class="a" d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z"/>
<path class="a" d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z"/>
<path class="a" d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

.. and if the paths were all welded into one, it would become something like this.

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z M738.5,245.7l-2.4,24.7
M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z
M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z
M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

The chunks of code I've used as an example here go from 1811 bytes (in your file), to 783 bytes... (56% saving)... and that can be achieved by making sure your software is being efficient.

The TL;DR is that you need to get your software to write 'cleaner' code.

I'm using Inkscape right now, can you show me your options? I saw you also know how to use Inkscape in the thread you post me. And also can I just change the code on my own. After all I do white box testing job, know a few thing or two about the frontend code

 

[Kobayashiiii]

Looks like you're already doing the basic stuff then, and it's drawn fairly efficiently.

Looking at the way the XML is written, there's a lot of this going on..

<path d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M738.5,245.7l-2.4,24.7" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z" transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>

.. you see that the transform and path style (transform="translate(0 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4") is repeated over and over again, 77 times in your file, that's ~8kb on its own.

So there's two things to do.

Firstly, the transforms don't do anything, and even if they did, they're likely a waste of kb's. I'm not sure how you go about getting rid of them, I'm sure it will depend what application you're using - I'm guessing something like an 'apply transforms' option?

Secondly, the line style details could be done using a style sheet - that way you define it once, and just reference it. How to achieve this will again depend on your software. In mine there's an option to use 'internal style sheets', instead of 'presentation attributes'...

You can also have non-contiguous paths, so for instance all the lines on the hair braid could be 'welded' into one path, that way it will use the line style details much less often. Again, this option might be called something different in your software.

Using a style sheet would make that block of code above look more like this... (this is representative only the syntax might not be quite right)

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z"/>
<path class="a" d="M738.5,245.7l-2.4,24.7"/>
<path class="a" d="M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z"/>
<path class="a" d="M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z"/>
<path class="a" d="M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z"/>
<path class="a" d="M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z"/>
<path class="a" d="M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z"/>
<path class="a" d="M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z"/>
<path class="a" d="M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

.. and if the paths were all welded into one, it would become something like this.

<defs>
<style>
.a  {stroke:black;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
</style>
</defs>
<path class="a" d="M676.1,473.5c39.4-41.4,46.3-80.7,34.1-118.9C720.6,387.4,720.1,423.6,676.1,473.5Z M738.5,245.7l-2.4,24.7
M780.8,307.5c-2.1,42.1-30.6,66.7-65.3,87.1C751.6,374.4,777.6,348,780.8,307.5Z M747.9,419.3c8.3,14.1,9.9,26.9,10.6,39.5C759.4,443.8,754.8,431.1,747.9,419.3Z
M791.4,400.5c3.5,12.3,4.3,24.7-4.7,37.1C796.4,425.2,794,412.8,791.4,400.5Z M833.8,414.6c-6.1,14.1-4.5,28.3-2.9,42.4C828.8,442.9,826.7,428.7,833.8,414.6Z
M872.1,471.7c-3.9-22.2.1-44.3,8.8-66.5-7.3,22.2-11,44.3-8.8,66.5Z M836.2,404c-4.3-28.2-6.1-56.1,12.9-81.2-17.3,27.1-17.4,54.1-12.9,81.2Z M768.5,348.7c9.3,22.8,42.3,20.2,57.1,34.7C808,366.8,780.5,376.1,768.5,348.7Z"/>

The chunks of code I've used as an example here go from 1811 bytes (in your file), to 783 bytes... (56% saving)... and that can be achieved by making sure your software is being efficient.

The TL;DR is that you need to get your software to write 'cleaner' code.

I change some options in Inkscape, output a file 23kb, then I use SVGOMG, get the file down below. It's still above 15kb, but I can't see where I can compress more.

 

[MatskiMonk]

I'm using Inkscape right now, can you show me your options? I saw you also know how to use Inkscape in the thread you post me. And also can I just change the code on my own. After all I do white box testing job, know a few thing or two about the frontend code

My experience with Inkscape is very limited and I don't have it on this PC at the moment.

In my software (old version of CorelDraw)...

The option to use a style sheet is in the export options...

The 'weld' function I referred to looks like this...

In Corel, it applies transformations as it goes so there's no options for that.

 

[Kobayashiiii]

My experience with Inkscape is very limited and I don't have it on this PC at the moment.

In my software (old version of CorelDraw)...

The option to use a style sheet is in the export options...

View attachment 1211742


The 'weld' function I referred to looks like this...

View attachment 1211744



In Corel, it applies transformations as it goes so there's no options for that.

Got it, I found SVGOMG can delete all the transform, so my goal now is to go through all the settings in Inkscape, see which one can work. Also I found when it's low numeric precision, it's hard to draw Bézier Curves.