SVG is the future of drawing! & why I don't like visual editors
Добавлено: 19 дек 2020, 17:51It's not a secret, all specialists say that vector graphics is the future of drawing. But amid all vector graphics formats, SVG is the outstanding xml-based, free, most popular format!
I've been learning SVG for 2 years now..
Good educational resources are:
There are opinions that SVG is hard to learn as any new programming language is. To be correct, SVG is not a programming language, but Extensible Markup Language, but as a whole, this allegation is correct!
Sure, but:
Any SVG-editor produces very redundant SVG-code! But my goal is drawing vector pictures with maximum simple code! Because I want to use my SVG-files for further manipulations via JavaScript, XML and so forth.
Having messy, complicated code it is impossible to work with it. Remember: SVG — this is an XML-document!
There is only one option to produce maximum clean code — to write code with hands in any text/code editor!
Let's look the example.
This face I programmed in Notepad++. This picture is in Png-format and its weight ≈ 45 KB, width ≈ 800 px.
The original SVG file weight ≈ 1.4 KB, width = ∞
Just 49 lines of uncompressed code! And you can scale this picture to infinite or any micro-size with no quality losses!!!
Later I'll put here the original SVG-file. Now I don't want it to get stolen, since I should show it to my customer at first.
I've been learning SVG for 2 years now..
Good educational resources are:
- https://developer.mozilla.org/en-US/docs/Web/SVG
- https://www.w3.org/TR/SVG11/Overview.html
- and Google, of course
There are opinions that SVG is hard to learn as any new programming language is. To be correct, SVG is not a programming language, but Extensible Markup Language, but as a whole, this allegation is correct!
Why I learn SVG
Well, you may wonder, in order to draw SVG-picture you can use any vector graphics editor and it's not necessary to know SVG-language!Sure, but:
Any SVG-editor produces very redundant SVG-code! But my goal is drawing vector pictures with maximum simple code! Because I want to use my SVG-files for further manipulations via JavaScript, XML and so forth.
Having messy, complicated code it is impossible to work with it. Remember: SVG — this is an XML-document!
There is only one option to produce maximum clean code — to write code with hands in any text/code editor!
Example
Let's look the example.
This face I programmed in Notepad++. This picture is in Png-format and its weight ≈ 45 KB, width ≈ 800 px.
The original SVG file weight ≈ 1.4 KB, width = ∞
Just 49 lines of uncompressed code! And you can scale this picture to infinite or any micro-size with no quality losses!!!
Later I'll put here the original SVG-file. Now I don't want it to get stolen, since I should show it to my customer at first.