How to convert .csh or .svg to symbol library?

I received for Christmas a digital painting course with a Photoshop form library in it, containing basic concept art shapes to make thumbnails.

The problem is that I have converted the .csh file (Form library) to single .svg files using an online tool but when I try to import the files to krita as symbols the program pops out:

“It was not possible to import the files as resources”
Screenshot_20221226_101727

It is a big problem for me and I beg of you, please help me.

Are you able to view the converted SVG’s with an image viewer, so you can be sure they were correct converted? XNViewMP for instance, a multi-platform viewer or in case you are using Windows you can view them with the very common viewer IrfanView.
To create a symbol library out of them, it would be best to do it with Inkscape, @AhabGreybeard has made at least one tutorial for that.
If you need them only as symbols with a fixed size, maybe you can use PNG as format instead of SVG.

Michelist

Thanks for reaching in, the svg file is working fine, I can open it in every program, I can’t use png as symbols since I can import them only as brush tips or patterns.

Lastly, I tried following @AhabGreybeard 's tutorial: Make your own Vector Library the sneaky way but I don’t understand the procedure, I wish it has more details on how to do it like:
What multi-tabbing syntax highlighting editor to use and how to use it
and what exactly to do with those files.

He meant a text editor where you can open several documents at once organized in tabs (tabbing), and syntax highlighting is something you can see in the following screenshot. It is able to display text in a structured way through the use of colors and indentations. Usually, the colors differ from programming language to programming language, and different editors may use different color schemes:

This is Notepad++, an editor for Windows, but there are more than enough editors for each OS with similar capabilities.

A SVG-File is only a text file describing the structure of the picture it represents.

Michelist

1 Like

I understand, so there isn’t a simpler way to do it? Like a webtool or a project on Github? It can be done only on Inkscape or with a text editor like vim?

1 Like

At least no one has found an easier way so far.
Just yesterday, I searched the net for a new method without success.

Michelist

That’s a bummer…

Please, Could you atleast tell me what parameters I have to change, or link me a tutorial? Possibly using Vim so I can be faster?

I beg of you.

If you have not yet downloaded @AhabGreybeard’s kit, do so and unzip the contents to a location of your choice.

Now open VIM, in VIM open the four SVG’s that are included. And now look at first at the structure of the file “My-Little-Vector-Library.svg”.
This file is provided with helpful remarks, these are your building-instructions. Everything in between this <!-- --> is a description!

You can (easily) see in this file where and how AhabGreybeard used the contents of the other SVG’s if you compare their contents to the “My-Little-Vector-Library.svg”. You can consider this file, with its descriptions, as your building instructions.

To begin, take a look at the code between
<!-- Start of first symbol. -->
and
<!-- End of first symbol -->
in “My-Little-Vector-Library.svg” and find this section in AhabGreybeard’s “one-shape.svg”, it is this part:

<rect id="shape0" transform="translate(115.2, 118.08)" fill="none" stroke="#23e540" stroke-width="18.2016" stroke-linecap="square" stroke-linejoin="bevel" width="161.28" height="145.44"/>

This is the part of an SVG that describes the picture it holds, and this is the part you have to find later on in your own SVG’s to paste it in between the “Start of XYZ symbol / End of XYZ Symbol”-Section of AhabGreybeard’s “template” after you have stripped out AhabGreybeard’s unneeded data from it.

###################################

Here I attached AhabGreybeard’s build instructions with my added comments in between.
Suggested changes are inserted in CAPITAL LETTERS (and I put them below the text-box where I entered them), compare it to the original if anything is not clear to you, and because the original template contains text in capital letters too. After you have worked through that description, I’ll describe what you have to do to make your own library:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
 
    width="1200"
    height="900"
    viewBox="0,0,1200,900"
    version="1.1"
    style="fill:black;stroke:black">

<!-- This title will be the displayed name in the Vector Libraries docker. -->    

BELOW YOU DESCRIBE YOUR LIBRARY, CHANGE THE CONTENT TO YOUR TASTE

  <title>RPICTURES-LITTLE-VECTOR-LIBRARY</title>
  <desc>basic concept art shapes to make thumbnails</desc>
  
<!-- START OF METADATA SECTION -->
<!-- The metadata section is not needed but it can contain important information if you intend  to distribute the vector library -->  

I added: RPICTURES-LITTLE-VECTOR-LIBRARY

↓again, customize it to your needs↓

  <metadata>
    <rdf:RDF>

      <cc:Work rdf:about="">
	<dc:format>image/svg+xml</dc:format>
	<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
	<dc:title>HERE COME BASIC CONCEPT ART SHAPES TO MAKE THUMBNAILS</dc:title>
	<dc:date>2021-07-01</dc:date>
	<dc:creator>
	  <cc:Agent>
	    <dc:title>RPICTURES CHRISTMAS C(O)URSE</dc:title>
	  </cc:Agent>
	</dc:creator>
	<dc:rights>
	  <cc:Agent>
	    <dc:title>Some other information</dc:title>
	  </cc:Agent>
	</dc:rights>
	<dc:language>English</dc:language>

<!--- CC declarations if you want them. -->

I added: HERE COME BASIC CONCEPT ART SHAPES TO MAKE THUMBNAILS and: RPICTURES CHRISTMAS C(O)URSE and if you want to, you can change: “Some other information” to anything you like, its useless. :wink:

↓→here follows some blah blah←↓

	<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
      </cc:Work>
      <cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
	<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
	<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
	<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
      </cc:License>
      
    </rdf:RDF>
  </metadata>
<!-- END OF METADATA SECTION -->

End of blah blah, here he describes the important thing to give your symbols unique id’s (names)!

<!-- Start of the symbol definitions. --> 

  <defs>
<!-- symbol id=  must be unique in this symbol list and it's sensible for it to be similar to the title value. -->
<!-- The title must be unique (as a title value) and is the symbol name in the vector library docker. -->

And now comes the first symbol entry:

<!-- Start of first symbol. -->

↑↓→Insert here in between the data defining your first symbol.←↓↑

<!-- End of first symbol -->
<!-- Start of second symbol. -->

↑↓→enter here in between the data defining your second symbol←↓↑

<!-- End of second symbol -->
<!-- Start of third symbol. -->

↑↓→enter here in between the data defining your third symbol←↓↑

<!-- End of third symbol -->

↓→from here on you have to continue to enter the defining data for each of your symbols, it should be understandable by now, right?
It always begins with <-- Start of XYZ symbol. --> and ends with <-- End of XYZ symbol -->, you have to add these lines by yourself for each symbol, and put its defining data in between.
From now on it is a stupid copy and paste game.←↓


  </defs>
<!-- End of the symbol definitions. -->

<!-- This next part makes the symbols show if you view it in a file viewer or your file manager has the ability to show .svg as pictorial icons. -->

<!-- It's not needed unless you want to see them in that way. -->

<!-- Make sure you use different and suitable x= and y= values or they'll all be displayed on top of each other. -->
<!-- The href= value refers to the symbol id in the symbol list above -->

↓→Down here you can enter the positions where you want to place your symbols like in a table, if you want to use them somewhere else than in Krita. You have to extend this table according to the number of symbols in your library. Otherwise, you can leave it blank and have to remove AhabGreybeard’s entries:
<use x="0" y="0" xlink:href="#OneShape"/>
<use x="0" y="300" xlink:href="#TwoShapes"/>
<use x="300" y="0" xlink:href="#TwoShapesGrouped"/> !←↓

  <use x="0"   y="0"   xlink:href="#OneShape"/>
  <use x="0"   y="300" xlink:href="#TwoShapes"/>
  <use x="300" y="0"   xlink:href="#TwoShapesGrouped"/>
    
<!-- End of the optional visible objects code. -->

</svg>

Now we are through this file!
Now I suggest making a copy from AhabGreybeard’s “My-Little-Vector-Library.svg” and strip out the data from his symbols. Then add as many <-- Start of XYZ symbol. --> <-- End of XYZ symbol --> entries to the stripped file as you have symbols to place in it. After you have added those entries, you can begin to copy the needed information from your SVG’s one by one into the prepared “framework” you’ve just created (so AhabGreybeard’s stripped “My-Little-Vector-Library.svg”). If you have them entered, you have to decide if you want to make a fancy table, so you can view them with other Software than Krita or Inkscape. I think the process of creating that table is self-explanatory.
And then, with or without table, you can save your new created library to disc!

I hope I haven’t overlooked or forgotten too much, but believe me, editing this text in the forum editor and keeping track of it is a pain!

Michelist

4 Likes

I would be interested to know if you are now able to create your symbol library yourself, and if not, where do you need help?

It is not as difficult as you fear. You can’t break anything with it, but without trying you will never get anywhere. If you find it too complicated to add more symbols to AhabGreybeard’s template, you can also take it and create many symbol libraries with different names, each with only three symbols. It’s just another way to reach the goal.
Just please don’t tell me, after the work I did yesterday because of your request, that you have given up.

Michelist

Oh sorry for not answering, I haven’t given up yet, and I think I’m up to the challenge, I just had problems today with this quest because no text editors can handle the size of those files, there was like 130000 lines in just one file and every text editor crashed at it, lol.

If only there is a way to directly copy to clipboard the text in files…

Regardless, you have been a great help to me, i could not thank you enough, but I have this problem now, copying the file content, and I think I’ll try again tomorrow.

Wow, 130000 lines of text for a single SVG file, I think that’s awesome! These must be extraordinarily complex structures, if so much text is necessary to describe them. This makes me very curious. Could you make 2 or 3 of these files available to me via a file hosting service?

You mean directly RMB on an SVG and choose copy text, instead of opening it in a text-editor? Yep, this would be cool.

#####################################

By the way, I must confess that I have omitted something of which I, as someone who understands the system to some extent, believe(d) you will recognize it yourself, but if this should not be so, I deliver the explanation herewith.
Between the beginning and the end of the symbol, a unique name is added to each symbol in the form of the “symbol id”. Then you can give your symbols a name in the title tag, before you close the symbol description with the tag /symbol in angle brackets, to continue with the following symbol.

<!-- Start of first symbol. -->
      <symbol id="ENTER YOUR UNIQUE NAME (ID) IN HERE">
        <title>GIVE YOUR SYMBOL A TITLE</title>

(Here in between you must add the data describing the symbol, like I described it yesterday.)

    </symbol>   
<!-- End of first symbol -->

Michelist

I mean copying the code but not making it too large )

Here you are Proton Drive )

I am already familiar with mark-up languages but thank you )

This should be a wiki. :+1:t2:

1 Like

Ok, I managed to compress all the files, let’s see what I can do now…

IT WORKED!!! we like to party, we like, we like to party, we like to party…

todododododon don tododododondon to-dodododon don to-dodododon don

2 Likes

That makes me happy for you!
Well then, I wish you now much joy, progress and success with your Christmas gift and Krita.
And of course that you will always have fun painting!

Michelist

Oh wow, people have been using MyLittleVectorLibrary. I’m glad all this happened while I was away :slight_smile:

@Michelist Thank you for giving detailed and comprehensive explanations :+1:

I’ve edited the original files to remove all strictly unnecessary content in the library file (except for the <!-- Comments --> ) and I’ve added <-- Comments --> to the sources files. I’ve also tidied the indenting structure.
(They used to be called Vector Libraries, now they’re called Symbol Libraries.)
Here is the updated collection if it would be of any use or interest to anyone:
MyMinimalSymbolLibrary.zip

@RPictures Those vector images are massive, both with image size in pixels and .svg code content!
My text editor has previously locked up when trying to copy/paste smaller vector content than those into a library. When I did manage to put a few ‘large’ images into a library, dragging them out of the Symbol Library docker across the canvas was a slow and stuttering process.
It may be that your computer is more powerful than mine and you don’t have those types of problems.

2 Likes

Oh, I thank you so much, merry Christmas to you too! :slight_smile:

@AhabGreybeard
Don’t worry, the trick was to mass-compress the files using a tool, they were about 5mb now about 500 kilos each, and I think my Computer is most likely weaker than yours, but still can ai-upscale images by itself without trouble (I’m telling it because it has only 6gb ram and a graphics card named “mx130”, it may be precipitous for me to say that, because being poor in resources and rich in knowledge shows a great sign of virtue in a professional painter like yourself :slight_smile: ) Happy Christmas!

1 Like

Thanks, that was a good idea of yours because users build on what they get.
And if the starting point (the original files, figuratively speaking) is easier to leave, because it’s not immediately steep uphill, because the underlying file base is easier to understand, so it’s easier for future users to start such a project!

Michelist

1 Like

@RPictures I’m nowhere near being a ‘professional painter’ but thank you for the compliment :slight_smile:
It would be interesting to see the symbol library that you’ve made, especially with the compression methods you used.
If possible, could you make it available via a file sharing service?

@Michelist As with most things, you don’t properly learn something unless you actually do it for yourself so I hope the ‘minimal’ version is easier to understand.

Happy Christmas and a Happy New year to both of you :slight_smile: