Svija is Tiny

This post is about this page↗ — you might want to look at it before continuing.

First, let me be clear: pourover makes the best coffee.

I’ll drink anything rather than go without, but pourover is the way.

I knew this when, after having bought more than fifteen different coffee making apparatuses, including four æropresses, I was drinking coffee at my mother-in-law’s house and thought: mais comment ça se fait que ce café est si bon ? (she’s French).

And I knew that the way, c’est du pourover (if you prefer espresso, I won’t judge you out loud).

This isn’t the post I set out to write

I started out to write an elaborate post about all the cool stuff you can do with Svija.

As part of the process, I created an infographic about coffee filters, then turned it into this web page: ↗

It turned out that I couldn’t find much to write — creating a website with Svija is just like other graphic design.

In this case, it took me:

  • eight hours to design the main infographic
  • 50 minutes to design a mobile version
  • 40 seconds to convert the fonts for web use
  • one press of a button to turn it into a web page

So, no long article — I’m not going to write 1000 words about pressing a button.

Svija is a tiny product, practically invisible — you design like you always have.

And, if you feel like making that into a website, well now you can↗.

How does it work?

I’ve been assuming that you know how Svija works. If you don’t, the thumbnail drive version is:

  • you design normally in Adobe Illustrator
  • there’s a minimal Mac app that uploads your changes constantly
  • there’s a tool panel in Illustrator to save the page
  • an admin website lets you add new pages and decide which Illustrator files will be shown

Svija vs. making a similar page in HTML

If I had wanted to present the same information on a traditional website, I would have had to make a choice between two bad options:

  1. do the same work in Adobe Illustrator then include the graphic as a plain image in a regular web page, or
  2. do a radically simplified version to fit into a WordPress-style theme

Either choice would result in a mediocre experience for my visitors.

But more importantly, in this case, I had fun. The whole process was a blast.

  • I never had to fight with my tools
  • I was never blocked from moving or resizing an element as I would have been if designing in HTML
  • I could use any fonts and shapes, transparency, curves, and long continuous lines, all impossible in HTML

The whole process was creative. There was no administrative stuff — no fighting with a CMS etc.

It did take me 45 seconds to convert five fonts at (it would have been faster but I’m too cheap for a paid account and can only convert two at a time).

Let that sink in: I did a beautiful web page, one that would be impossible with any regular website builder, and it was fun, (and it’s Google-indexable, accessibly readable etc).

Are there mistakes in my infographic?

I actually don’t know anything about coffee filters, although I did obsessively measure the ones used for the graphic.

I’m sure the kind souls on the internet will correct me if I’m wrong about something.

And you know what? With Svija, I can make corrections in less than 30 seconds.

The next step: animation

The one flaw with this graphic is that it’s static.

We’ve gotten to the point where website animation, at least for a marketing website, has become de rigueur.

The coffee-filter page suffers from an absence of movement. So, I’m going to add some animation.

I won’t add anything too radical, but some dyamic scaling, a little rotation, some gentle surprises, and a few mouseovers will really make the page come alive (h/t Mick Jagger↗).

Hacker News

Visit — 162 comments (some of them were ours). There was lots of useful feedback, and some nice compliments:

Absolutely ingenious. I love what you’ve done here.

I agree, this could fix a massive amount of headaches depending on what kind of site you’re building.

If it’s proven to be performant enough, I think it would work for 90% of sites out there (pages of information + pictures)

Theoretically you could even have a graphic designer build a site without much code knowledge instead of hiring a webdev.

This is how you enable creative web design. Sure, you shouldn’t necessarily run your business on something like this (for a multitude of reasons), but for personal websites and prototypes this is great.

When Flash plugins were on the way out everyone always repeated how this would open the door for equally powerful HTML5 tooling. But while HTML5 has gained all the technical capabilities of Flash, nobody has managed to make an authoring tool as good as Adobe Flash. With the loss of Flash we mostly lost the creative websites by people who can’t code but are great at visual design. This comes close to enabling that again.

I really like that this allows people to finally break free from the box design and try something new. Of course there will be challenges like accessibility along the way but those can be solved.

An idea who’s time has come? SVG is an awesome concept, a superpower that has been basically demoted to create tiny vector icons.

Fuck yeah, I love svgs. I’m not a designer so this isn’t really for me, but the potential here is huge. Nice work.

I really really really really really really really really LOVE THIS.

1 feature I love to see, if possible, is to implement either youtube videos or Gifs.

(Would be cool if there was a really basic keyframe animation tool bar, but thats a lot of work) So don’t listen to me.

But overall i love this. Thank you for making this!

I like this idea. Using SVG on websites is quite fun to break the rigidness.

The workflow idea behind this is super innovative– From your SVG program directly to the web.

Of course some bugs to work out, but for a new idea, damn.

I think this is great! it has some drawbacks, but I enjoy seeing others push the web to its limits.

A Folder Called Links

This article is based on content at this page at

Most Illustrator users are familiar with the “Could not find the linked file…” dialog box:

This happens when a document or its linked images have been moved, and paths to the placed images have changed.

An Easy Solution

There is an easy way to make sure that Illustrator can always find placed images: put them in a folder called “links” in the same parent folder:

Whenever Illustrator can’t find an image, it looks for a folder called links in the same place as the open document.

Now, you can move the parent folder wherever you want and never worry about breaking links to any placed images.

This behavior is useful in working with Svija, but it is also useful for any other project done with Adobe Illustrator.

When Images Go Missing

Occasionally, Illustrator will link to images that are in the wrong place. This usually happens when a project has been copied.

To fix this and other problems, Svija Tools includes a button labeled Reset Image Links:

This tool will automatically repair linked images:

  • if the image is in the same folder as the .ai file, it will be moved to a links folder
  • if the image is elsewhere on the computer, it will be copied to the links folder
  • if the image is embedded and the original is still available, it will be copied to the links folder and converted to a linked image
  • if the image is embedded and the original cannot be found, it will be highlighted in yellow

A Nicer Background Color

TLDR: by default, Illustrator provides a harsh white background for each file. For a much nicer experience:

  • enable the Transparency Grid (cmd-shift-D)
  • set the two Transparency Grid colors to be the same (cmd-option-P)

By saving an empty file as a template, files will default to the the new color.

By default, Illustrator provides a white background for your artwork:

There are two reasons why this is not optimal:

  • any elements of the design that are white are invisible
  • working on a bright white background makes it difficult to accurately perceive the colors in the design

The great masters knew this — scratch any important painting and you’ll see that it was painted on a colored background.

We’re going to change the white background to this:

The Transparency Grid

You can turn on the transparency grid by typing cmd-shift-D, or by looking under the menu View › Show Transparency Grid. Remember that command — you’ll be using it a lot!

Here’s what it looks like when we turn it on:

The default colors are unusable, but we’re going to fix that.

Document Setup

In the Control Bar (Window › Control), click on Document Setup (or type cmd-option-P):

This will launch the following panel:

We’re going to change the color of the white and gray boxes in the above image.

The key is to set them both to the same color; this will be our new background.

Just click on one of them:

Use the crayon picker, and set both rectangles to Iron color (which matches the Illustrator interface nicely).

After clicking OK, here is what the document will look like:

It’s a much nicer working environment, and depending on the project, it might even be necessary.

Tip 1: type cmd-shift-H to hide the black line around the artwork while you’re working and it’s even nicer (or menu View › Hide Artboards).

Tip 2: save a template with this setting and you’ll never have to change it again.

Unlock More Preferences

TLDR: many of Illustrator’s user preferences are set per-document.

By using New from Template… rather than New… you can make them persistent:

First, stare at this text for 10 seconds, or as long as it takes to burn it into your retinas:

Can’t unsee it? Great, we can continue…

Illustrator has lots of useful preferences outside of the main Preferences pane.

Unfortunately, they are per-document preferences that can’t be set globally. And, the defaults are often pretty useless.

Except for a few masochists that spend ten minutes setting up each new document, almost nobody benefits from customizing these settings:

Customizing these settings can vastly improve the experience of using Adobe Illustrator, but doing it each time you create a document isn’t feasible.

Luckily, there’s an easy way to make these settings persistent.

Template Documents

The secret is to create template documents with everything configured in advance.

All the settings mentioned above are preserved, and you can easily create a few different sizes for recurring types of projects.

My templates include:

  • A4 · 210×297 mm
  • HD · 1920×1080 px
  • Letter · 8.5×11″
  • Logo · 500×500 px
  • Various Svija templates

Each template has custom guides, background color, swatch choices, layer names and colors, and ruler coordinates.

File › New From Template · cmd-shift-N

Creating a new document from a template is just as simple as creating a new document:

  • File › New from Template…
  • cmd-shift-N

It took me a few weeks to consistently remember to type cmd-shift-N instead of cmd-N, but now it’s been years since I’ve typed cmd-N in Illustrator.

Every time I sit down to work, all my settings are exactly the way I want them – it’s fast and elegant.

Creating A Template

Creating a template is trivially easy:

  1. Create a document, customize the settings listed above and save it
  2. Change the .ai extension to .ait
  3. Move it to Cool Extras › Templates:

From now on, the new template will be available when you type cmd-shift-N.

Tip: the template doesn’t have to be an empty document. I often include logos, notes or other elements that I need on a regular basis.