How can Inkscape be useful for web developers?
Translation from English: Inkscape: optimization tips for web developers .
In this short article I will share with you some useful tricks to work with the Inkscape vector graphics editor, which help speed up the process of preparing SVG-code.
')
By default, Inkscape uses its SVG format, which contains a wealth of useful meta-information. After completing the work with the document, it is better to save the final version in the Plain SVG format. This can be done using the File-> Save As menu (or using the keyboard shortcut Ctrl + Shift + S ). In the dialog box that opens, select Plain SVG .
Very often, on the Internet, vector images are laid out in a non-optimized form, which we will definitely have to resave in a more compact form.
Even if you save an empty document in Inkscape SVG format, then its size (1.8Kb) will be several times larger than Plain SVG (0.4Kb).
Rulers (you can turn on using the keyboard shortcut Ctrl + R ) is a handy tool that helps to place the figures in the upper left corner. Such figures will have initial coordinates close to 0.0, which means that then they will not have to be programmed to drag them from the -1000, -2000, or from 3000, 1000 positions. Well, in text form, such figures will be clearly smaller.
To quickly access the properties of objects, such as path , you can use the built-in XML Editor . You can call it using the keyboard shortcut Ctrl + Shift + X. I usually use it when I need to quickly outline a path for an object to be animated. For example, when preparing demos with SVG cars , it was quite easy and convenient to get information about the route of each car.
Initially, the SVG settings for generating the path element path are rather redundant. After the point, each number in the coordinates is added five more numbers. For example: 122.85714, 295.21933 . For many tasks, such accuracy can be useful, but for simple figures it is better to reduce the accuracy. As a result, you can get 122, 295 . If there are many such numbers, it makes sense to play with the settings.
In addition, relative coordinates are enabled by default in Inkscape. They can only be useful to a web developer in rare cases, so it’s best to disable them.
Go to the menu File-> Inkscape Preferences or use the keyboard shortcut Ctrl + Shift + P. In the opened window with settings on the left select SVG Output .
Uncheck Allow relative coordinates and change Numeric precision to 2.
As a result, Inkscape will pop out more compact data.
Another useful tool in Inkscape is Simplify. It simplifies and makes the path element path more compact by reducing irrelevant points. You can use it from the menu: Path-> Simplify or by pressing Ctrl + L , after selecting the element to be simplified. It’s not always possible to agree with Simplify’s work, but quite often it really removes irrelevant points that it would be difficult to find just like that.
In this short article I will share with you some useful tricks to work with the Inkscape vector graphics editor, which help speed up the process of preparing SVG-code.
')
1. Making a compact SVG
By default, Inkscape uses its SVG format, which contains a wealth of useful meta-information. After completing the work with the document, it is better to save the final version in the Plain SVG format. This can be done using the File-> Save As menu (or using the keyboard shortcut Ctrl + Shift + S ). In the dialog box that opens, select Plain SVG .
Very often, on the Internet, vector images are laid out in a non-optimized form, which we will definitely have to resave in a more compact form.
Even if you save an empty document in Inkscape SVG format, then its size (1.8Kb) will be several times larger than Plain SVG (0.4Kb).
2. We use rulers (Rulers)
Rulers (you can turn on using the keyboard shortcut Ctrl + R ) is a handy tool that helps to place the figures in the upper left corner. Such figures will have initial coordinates close to 0.0, which means that then they will not have to be programmed to drag them from the -1000, -2000, or from 3000, 1000 positions. Well, in text form, such figures will be clearly smaller.
3. Use Inkscape to quickly extract information from the figures.
To quickly access the properties of objects, such as path , you can use the built-in XML Editor . You can call it using the keyboard shortcut Ctrl + Shift + X. I usually use it when I need to quickly outline a path for an object to be animated. For example, when preparing demos with SVG cars , it was quite easy and convenient to get information about the route of each car.
4. Path optimization
Initially, the SVG settings for generating the path element path are rather redundant. After the point, each number in the coordinates is added five more numbers. For example: 122.85714, 295.21933 . For many tasks, such accuracy can be useful, but for simple figures it is better to reduce the accuracy. As a result, you can get 122, 295 . If there are many such numbers, it makes sense to play with the settings.
In addition, relative coordinates are enabled by default in Inkscape. They can only be useful to a web developer in rare cases, so it’s best to disable them.
Go to the menu File-> Inkscape Preferences or use the keyboard shortcut Ctrl + Shift + P. In the opened window with settings on the left select SVG Output .
Uncheck Allow relative coordinates and change Numeric precision to 2.
As a result, Inkscape will pop out more compact data.
5. Simplify tool
Another useful tool in Inkscape is Simplify. It simplifies and makes the path element path more compact by reducing irrelevant points. You can use it from the menu: Path-> Simplify or by pressing Ctrl + L , after selecting the element to be simplified. It’s not always possible to agree with Simplify’s work, but quite often it really removes irrelevant points that it would be difficult to find just like that.
Source: https://habr.com/ru/post/149016/
All Articles