I have been using inkscape for some time, every now and then i have some issues but youtube tutorials have helped a lot.
Today i am tweaking some SVG graphics icons for my website.
I am downloading graphics from here: icon-sets.iconify.design
I am tweaking the images i need right on their page, and then downloading the SVG versions to my computer.
If i upload the images to my wordpress site, they show fine, no problems, but i need to tweak the SVGs first with inkscape and then i am saving the result to a new file. Here is where i start having issues.
I can see the new saved graphic on my computer with any viewer, but when i upload the graphics to my wordpress site, the images do not show, it is just blank, and the dimensions are also showing incorrectly.
I have tried switching to the different options during export, like plain SVG and inkscape SVG to no avail.
Here are some screenshots to give an idea. In this example, i am working with the handshake icon. The other ones also had issues but i did some obscure magic tricks the last time i worked on them and managed to make them display.
I am using inkscape 1.2, on linux mint cinnamon 20.3.
I am attaching both, the original image (handshake.svg), and the modified by inkscape version (handshake1.svg)
All the other icons i used were also modified by inkscape with mixed results.. sometimes they worked, but most of the times i had the same issue not being display when uploaded to my site.
Krita apparently doesn't like Inkscape files either. In that case it's that Inkscape creates a layer by default, so you have to copy your objects, delete the layer and paste the objects back in. Maybe it's the same with Wordpress?
@Tyler, i tried your image, it works but the modification i am actually making is to leave some padding on the image on the sides, as i am using my wordpress editor tools to put the icons inside a circle like this:
I used the image you modified in this example, and it is the same as if i used the original image.. i need to put the outer blank frame so the whole image shows inside the circle as the other ones on top.
@Bleke when i created the other images and i was trying to find the source of the problem, i suspected the layers could be an issue.
This time i cut the image element and erased everything else leaving no layer whatsoever, then i pasted the element and i ended up like this:
Then i exported the graphic... and i am back to the same problem. it shows blank when i upload it to my site.
I am not sure what i did the last time to make them work... i think i was pasting the element in another file that worked and exporting from there, but now i do not remember.
I opened the files in krita (i have it installed i guess by default in my Mint setup, i never used it). The inkscape files freeze the program and system pretty bad, i have to kill it via the terminal.
But i see i can open the original files in krita without issues.. so i will give it a try and save from krita to see what happens.
Thank you tyler.. although the version you made was not fitting exactly like the others, it helped me pinpoint the issue. (but not really)
So the problem was trying to make the files as small as possible,,, (and somehow i managed to make the other icons 2kB or less but i have no idea how they worked)
On this specific handshake file, if there is a layer behind to make the box for the padding, then exporting from inkscape, the file works.. otherwise without that layer, and just with the plain element alone, it does not work..
But then.. i am left scratching my head, because the other files i created, the small ones, did not have this layer and they still worked... i am attaching 3 of them as proof.
I found a solution to my problem, but i do not have an answer about why i had so many issues with the other files and how i managed to make them work.
Beginners' Questions blank SVG images when uploading to wordpress.
Inkscape.org
Hello friends. First post here.
I have been using inkscape for some time, every now and then i have some issues but youtube tutorials have helped a lot.
Today i am tweaking some SVG graphics icons for my website.
I am downloading graphics from here: icon-sets.iconify.design
I am tweaking the images i need right on their page, and then downloading the SVG versions to my computer.
If i upload the images to my wordpress site, they show fine, no problems, but i need to tweak the SVGs first with inkscape and then i am saving the result to a new file. Here is where i start having issues.
I can see the new saved graphic on my computer with any viewer, but when i upload the graphics to my wordpress site, the images do not show, it is just blank, and the dimensions are also showing incorrectly.
I have tried switching to the different options during export, like plain SVG and inkscape SVG to no avail.
Here are some screenshots to give an idea. In this example, i am working with the handshake icon. The other ones also had issues but i did some obscure magic tricks the last time i worked on them and managed to make them display.
I am using inkscape 1.2, on linux mint cinnamon 20.3.
Exporting:
https://i.imgur.com/tuR30b6.png
Exported graphic on my computer:
https://i.imgur.com/LqY8Gvh.png
Uploaded to wordpress:
https://i.imgur.com/DmoZ5lk.png
Uploaded to wordpress:
https://i.imgur.com/gcMx5lb.png
I am attaching both, the original image (handshake.svg), and the modified by inkscape version (handshake1.svg)
All the other icons i used were also modified by inkscape with mixed results.. sometimes they worked, but most of the times i had the same issue not being display when uploaded to my site.
Thank you guys for any tips.
Handshake1 would not display in Chrome, so I removed some transforms and it seems to work better. Here's the file to try:
Krita apparently doesn't like Inkscape files either. In that case it's that Inkscape creates a layer by default, so you have to copy your objects, delete the layer and paste the objects back in. Maybe it's the same with Wordpress?
Thank you so much @Tyler Durden and @bleke !!
@Tyler, i tried your image, it works but the modification i am actually making is to leave some padding on the image on the sides, as i am using my wordpress editor tools to put the icons inside a circle like this:
https://i.imgur.com/IGOn9YS.png
I used the image you modified in this example, and it is the same as if i used the original image.. i need to put the outer blank frame so the whole image shows inside the circle as the other ones on top.
@Bleke when i created the other images and i was trying to find the source of the problem, i suspected the layers could be an issue.
This time i cut the image element and erased everything else leaving no layer whatsoever, then i pasted the element and i ended up like this:
https://i.imgur.com/VaxJ170.png
Then i exported the graphic... and i am back to the same problem. it shows blank when i upload it to my site.
I am not sure what i did the last time to make them work... i think i was pasting the element in another file that worked and exporting from there, but now i do not remember.
@bleke
I opened the files in krita (i have it installed i guess by default in my Mint setup, i never used it). The inkscape files freeze the program and system pretty bad, i have to kill it via the terminal.
But i see i can open the original files in krita without issues.. so i will give it a try and save from krita to see what happens.
thank you
Here's a version with an empty rectangle object to provide the padding. I'd give this a try.
Got it!!!
Thank you tyler.. although the version you made was not fitting exactly like the others, it helped me pinpoint the issue. (but not really)
So the problem was trying to make the files as small as possible,,, (and somehow i managed to make the other icons 2kB or less but i have no idea how they worked)
On this specific handshake file, if there is a layer behind to make the box for the padding, then exporting from inkscape, the file works.. otherwise without that layer, and just with the plain element alone, it does not work..
But then.. i am left scratching my head, because the other files i created, the small ones, did not have this layer and they still worked... i am attaching 3 of them as proof.
I found a solution to my problem, but i do not have an answer about why i had so many issues with the other files and how i managed to make them work.
Oh well...
Thanks again!!