User Decals - A Tutorial On How To Make .SVG (Request in separate thread)
- Thread starter daan
- 1,493 comments
- 384,340 views
- 17,049
- United Kingdom
Visit https://jakearchibald.github.io/svgomg/
Upload/drag n drop your file there, if it's 48kb now, reduce the slider to 2 or 3, and it should be 15kb, download the output and try uploading that.
Also, maybe try some breathing exercises or yoga.
Last edited by a moderator:
- 42
- Montreal
This site doesnt work at all for me... i drag the file on and i can see the thing loading but... 1 hour, 2... 3... nothing happens.
- 17,049
- United Kingdom
This web tool is awesome, thank you for posting it
- 42
- Montreal
My logo is this one :
https://fr.wikipedia.org/wiki/Fichier:Logo_SQ.svg
You can download it as a svg file : (Fichier SVG, résolution de 499 × 578 pixels, taille : 171 Kio) but I tried everything and after so many hours, i think livery is not for me. LOL !! I will go to play instead of swearing about this (...)
- 17,049
- United Kingdom
Okay, I can see why you are struggling with this.
That file contains a lot of information that isn't needed, and will confuse SVGOMG, even with that information taken out, it's quite a complex logo, so it won't get to 15kb without looking awful.
It also has lots of unclosed shapes, which quite often makes the decal uploader fail.
None of which helps you... but it wasn't anything you were doing wrong!
... so ... I thought, I'd clean it up and have a go ... had to be three files in the end...
Zip file attached with the following logos. I can share them if you are not able to upload them. Remember, unzip the file and then upload, don't try to upload straight from the zip file.
It’s in the OP too you know.worth knowing that you can get filesize down drastically by merging layers too. All blacks in one single layer and all reds in another +++.
my mistake, sorry and thank you for originally posting it. i have been optimising files as well as i can but for complex hand traced illustrations its difficult to keep it down even with a minimum of nodes, paths and layers. but i put one of my 4 part decals into svgomg and it took the total size down from 50kb to 13.6 with no visible differences at all, its amazing.
edit for reference: https://s3.amazonaws.com/gt7sp-prod/decal/28/43/51/6062478488140514328_1.png -- 13.6kb!
Last edited:
syntex123
Staff Emeritus
- 4,801
- Færder
- syntex123
- Syntex260Z
You can make pretty complex designs and achieve small sizes if you click less, hard to explain. But I’ve been surprised many times by how small the size has been even though I thought it would be too big. My first try of the Isle of Man logo was wayy too big. But after a few tries I managed to get it to around 10kb(without SVGOMG). Just bend your curves more where your normally would put another anchor point. You’ll be surprised
I always try to stay on as few layers as possible, one layer for each color. Helps keeping the size down too.
- 388
- The Dutch flatlands
Hey guys, need a bit of advice/help here.
I made this Le Mans GT1 class badge for this car in Inkscape:
http://motors.all-free-photos.com/show/showphoto.php?idph=PI42742&lang=en
https://cdn-9.motorsport.com/static...ung-driver-amr-aston-martin-dbr9-pit-area.jpg
But I am having difficulties getting the four corners evenly rounded. What am I not doing right here?
I made this Le Mans GT1 class badge for this car in Inkscape:
http://motors.all-free-photos.com/show/showphoto.php?idph=PI42742&lang=en
https://cdn-9.motorsport.com/static...ung-driver-amr-aston-martin-dbr9-pit-area.jpg
But I am having difficulties getting the four corners evenly rounded. What am I not doing right here?
https://svgshare.com/s/5q9
try this .. all i did was delete the corner nodes. its much easier to make a curve between two nodes than it is to make one out of nodes themselves. it's not laser precise or anything but it won't be noticeable on a livery
- 388
- The Dutch flatlands
- 17,049
- United Kingdom
The short version of this request... I have an 8 layer image that I want to cut into 16 equal squares in inkscape. Can anyone give me any pointers?
I could do it in seconds in Corel, but without going into the long version of the story, that's not an option. Separating by layer isn't an option because they are still too big, and I don't want to delete any more nodes, so I want to slice the image up into tiles. Can't seem to get 'intersection' or 'cut' to do what I want.
I could do it in seconds in Corel, but without going into the long version of the story, that's not an option. Separating by layer isn't an option because they are still too big, and I don't want to delete any more nodes, so I want to slice the image up into tiles. Can't seem to get 'intersection' or 'cut' to do what I want.
- 388
- The Dutch flatlands
I think @Maninashed could help you out on this one. I understand the question, but way above my button bashing abbilities.
put everything onto one layer and pick the two nodes where you want to cut a section from, highlight them both and then path > break path at selected nodes, then highlight the path and path > break apart which will separate the two halves into two paths
to be honest it sounds like a pain in the ass to do it like that because you'd probably have to do it for each individual path that crosses over the point you want to divide the image at .. maybe there's a way to do it for every path at once but i would rather just shuffle paths around onto different layers and optimise them until they're all under the file size
- 1,196
- Australia
I Don't know of any easy way of doing it. Is splitting the picture up in another program then trace each bitmap an option.
The long method would be to use squares shapes over your svg selecting everything then use [object] [clip] [set] then highlight all paths and nodes deleting all nodes outside the visible area. For any paths running through into the invisible areas leave one node on the invisible side for each entry and exit path.
Never tried it myself until now. Included picture of experimenting.
Would take quite awhile to do.
- 17,049
- United Kingdom
Thanks for the tips, it's good to know I wasn't missing something obvious at least! Owing to the number of paths splitting them individually would be a nightmare. @eclipsee seems like that extension might do the job I wil investigate it thanks.
___________
FWIW ... I typed this up for another member a while ago on how I'd do it Corel (the image I was using was one drawn for a different member)
Step 1: Get you image, and group it, then draw simple squares or rectangles over it. Make sure your objects snap to each other, that way you can make sure the corners are perfectly aligned.
Step 2: Once you've drawn the squares, first select the Square you want to cut with, then select the logo/image group. Then hit Intersect... if you select them in a different order, you might get odd results.. in corel, first you have to select the shape you want to cut with then the image you want to cut up.
Step 3: This will cut the background group with the front shape... in Corel that looks like this....
Step 4: Do this for each square. Save/Export each finished tile individually.
NOTE: This doesn't work so well if you are using Strokes. If you put a cut through a line that uses a stroke colour, it will apply that color to the edge of the shape... so in the character above, you might end up with a blue line running down the middle of his face and body..
Hope this makes sense!
This doesn't work so well if you are going to put it on a very curvy car, as it gets hard to line up the edges..
___________
FWIW ... I typed this up for another member a while ago on how I'd do it Corel (the image I was using was one drawn for a different member)
Step 1: Get you image, and group it, then draw simple squares or rectangles over it. Make sure your objects snap to each other, that way you can make sure the corners are perfectly aligned.
Step 2: Once you've drawn the squares, first select the Square you want to cut with, then select the logo/image group. Then hit Intersect... if you select them in a different order, you might get odd results.. in corel, first you have to select the shape you want to cut with then the image you want to cut up.
Step 3: This will cut the background group with the front shape... in Corel that looks like this....
Step 4: Do this for each square. Save/Export each finished tile individually.
NOTE: This doesn't work so well if you are using Strokes. If you put a cut through a line that uses a stroke colour, it will apply that color to the edge of the shape... so in the character above, you might end up with a blue line running down the middle of his face and body..
Hope this makes sense!
This doesn't work so well if you are going to put it on a very curvy car, as it gets hard to line up the edges..
syntex123
Staff Emeritus
- 4,801
- Færder
- syntex123
- Syntex260Z
I just want to pop in here and say I might have another tutorial for those who still struggle a little with making the svg by hand as well as the uploading part. A video tutorial this time, instead of images and text.
Since the logo was made to help out @Crouchinghero, and it is his companys logo, I’m awaiting a green light from his partner if I can upload the video here or not. Crossing fingers!
Since the logo was made to help out @Crouchinghero, and it is his companys logo, I’m awaiting a green light from his partner if I can upload the video here or not. Crossing fingers!
- 1
- Netherlands
Thanks again for all the help... and adding the link to our website!
syntex123
Staff Emeritus
- 4,801
- Færder
- syntex123
- Syntex260Z
Yeah of course, and thank you for giving me a good logo to work on to make this video, I planned it forever but never got around to it, haha.
And welcome to GTPlanet buddy, for all your GT needs and racing games in general, this is the place to be. We’re a quirky gang, but there’s fun to be had here!
- 17,049
- United Kingdom
- 2,510
- S.C.
- MMXtreme
Illustrator CC
- 17,049
- United Kingdom
Ah, in that case I'm not sure. I could tell you what was wrong from looking at the XML, but not how to avoid it.
I think the notes that @eclipsee posted earlier in the thread are relevant in that case. IIRC, don't try and duplicate a shape with a gradient, and only apply gradients once you've moved or transformed stuff, and don't try and transform the gradient.
