It's been a while since I introduced a new syntax to the css-doodle project to solve my own problems. While I'm not sure it would be useful elsewhere, I need to make some notes before I forget the details.
I always find it a bit hard to write SVG without the help of additional tools or libraries. The main issue for me is that SVG code grows too fast to keep up. If we take a closer look at the way most SVG is written, you'll notice that the code grows in two dimensions: attributes and tags.
From this perspective, it might explain why writing HTML is relatively easier than SVG. There are much fewer attributes in HTML elements so the code of HTML grows approximately by tags in ONE dimension.
HTML could have become like SVG if CSS did not exist.
We can see this from several deprecated attributes
Nowadays, though, it's still possible for HTML to grow in two dimensions if using tools like Tailwind, where the long predefined class names are kind of extended attributes to HTML elements.
What I love about CSS is its readability. There are no unnecessary quotes around property values even when separated by spaces. And the CSS code always expands from top to bottom if following best practices.
What if I could write all SVG attributes in CSS?
Despite the fact it's unlikely to change the two-dimensional nature of SVG code to one-dimensional at the same time to make it isomorphic transforming back and forth, it would at least be pleasant to write SVG with the syntax of CSS.
This seems to work. Tags are written as CSS selectors and attributes as CSS properties. For child SVG elements we can use the upcoming CSS nesting syntax. However, I'd prefer the SCSS way of nesting because I don't have the same concerns with browser engines as described in this article.
The process of converting from SVG syntax to CSS did not go as smoothly as expected due to the various formats of SVG attribute names and values. Therefore, I had to extend the CSS syntax a bit.
1. Colon-separated attributes
Since CSS uses the colon symbol as the separator in a declaration, it must be handled specially if the attribute name also contains a colon character.
2. Semicolons in SVG animation
In CSS, a semicolon is used to mark the end of a declaration. In SVG, on the other hand, semicolons are used to group animation values. How can you tell the difference between the two types of semicolons when they are put together?
4. Inline styles
style keyword to represent
each CSS property is the best way I could find to convert inline styles.
They are normally not encouraged to use so
it seems reasonable to make them a bit more verbose.
This is how the code for a simple graph will look like:
Some New Features
As I experimented further, I realized that several new features would make the new syntax more user-friendly.
1. Attribute Destructuring
Some attributes can logically be grouped in pairs, so it is convenient to place them on the same line, separated by commas.
This shorthand also makes it possible to use it with the
css-doodle which returns a pair of coordinate values.
2. Id Abbreviation
id attribute is for referencing element and is often used
in gradients, markers, and filters.
Instead of writing it inside blocks,
it can also be set as an ordinary CSS id selector of the element.
3. Inline defs
In SVG, graphic objects are stored within the
<defs> element and to be use somewhere else by referencing their ids.
But sometimes I find it quite neat to define them directly where they are to be used. The reference ids are then generated automatically.
Inspired by Emmet,
* is used to generate the same element multiple times.
It'll be most effective when combined with
Here's an example to draw a symmetrical structure.
Earlier this year, I tweeted a code example that used this new syntax,
as a reply to rewrite Shunsuke Takawo's Processing program in
The multiplication operator had not yet been added at that time.
Now the SVG part can be simplified as this: (CodePen)
I shared another sample on Twitter that was generated using SVG paths and filters.
I did not attach the code because I thought it was not as elegant as its output.
Still, it would be a good example to recreate it with
css-doodle functions under the new syntax.
First, outline the structure by placing each
Q coordinate around a circle.
Then add more paths and random stroke styles. Not as extactly as the old one but you get the idea. (CodePen)
How To Use It in Your Own Project?
The latest version of
the generator as a function that returns the output SVG code.
The plugin postcss-doodle allows you to use
in regular CSS.
The conversion isn't complete. Dealing with SVG elements like
<foreignobject> can be difficult.
I haven't tested it with long SVG code, but I think it'll also be bloated as the drawing gets complex.
I like this new syntax mainly because it has less visual noise compared to the original SVG.
For me the most satisfying thing is that it integrates so well with