Text in SVG: 3nd Attempt (Size Reduction)

Several days ago I wrote about finally solving the text in SVG problem. The key was to pick an open-source font, obtain the woff and svg font files, convert those files into base64 data streams, and plop the whole thing inside the actual SVG itself. And it works!

Problem is, I overlooked the file size. My original PNG logo file is 20KB. The new SVG is 400KB. That's 2000% increase in size! And completely unacceptable to me. I set out to find ways to decrease the size.

My first find was the tspan element. This is an element, similar to HTML's span, which can be embedded in a text element. Instead of having a new text element for every enlarged letter, I can just wrapper those letters in a tspan element and use CSS to apply the font. This helps in rendering time, but unfortunately doesn't significantly change the file size (409KB to 408KB).

I then tried removing whitespace. It screwed up the file and didn't really save space.

My final idea was to look at the cause of the large size. The current SVG had both an SVG and WOFF font file embedded. Looking at the font size, it turns out that the SVG font files were huge. 120ish KB each, for the two fonts I'm using. And an SVG font is readable if one opens it in a text editor. It's kind of odd to look at, but I found a pattern, and I found saw each letter and typical character. I simply removed all characters that I'm not using for the logo. Doing this for both fonts and reencoding in base64 netted me a huge size reduction. The SVG logo is now down from 408KB to 120KB. That is still far larger than 20KB, but it's a gain I can live with given the sharpness benefits of SVG.

This does mean that if the text ever changes in the logo, I'm going to have to go back to my original font files and add or subtract certain characters. But the text is a company name, meaning it won't change often. I've texted in Chrome and Firefox on Android, along with Chrome, IE11, and Firefox on Windows. Take a look at the 408KG and 120KB versions below:

SVG 408KB:

SVG 120KB:

Text in SVG: 2nd Attempt

Last week I attempted to convert a complex logo involving text into SVG, and failed. This was due to the fact that the logo in question used Palatino Tinotype, which is a font that seems to be completely safe because it's installed on all Windows and OSX machines. However, this is actually not an open source font, and Android phones don't come with it. The logo ended up using the default serif font for Android, which messed up the spacing and looks quite terrible.

Additionally, Chrome on Android doesn't support the CSS selector "first-letter", which I had been using to increase font sizes. I have since been able to address both of these problems. I split the "text" elements so that all first letters of increased size were in their own wrapper, which I applied a class to. Increasing the font size using this class works on all browsers. The font issue was more complex. The owner of the logo declined to pay $165 to buy Palatino Linotype, so I had to find a free alternative. After searching for a while, I came across TeX Gyre Pagella. This is a free font, and it looks extremely similar to Palatino Linotype. And so without further ado, I present the final product along with original PNG for comparison:

SVG:

Original PNG:

EDIT:

It turns out at at the time I posted this, I was STILL missing something. When SVG files are embedded, they can't have any external dependencies. This includes referencing fonts. I therefore had to convert the fonts to a data URI stream. To be entirely honest I have no idea how it works, except in concept. It takes the entire file, converts it into a special text language, and I insert that text blog into the spot that I'd put the font address. I found a very nice tool, which let me upload the font files.

One issue I now see is that the SVG file is much larger. We are talking 400KB instead of 5 or 10. This somewhat destroys a large advantage of SVG in the first place, which is the smaller file format. However, it retains the perfect sharpness at all sizes, which is worth it. I've edited the file which is previewing above, so it should look great on all devices, finally. If it doesn't on whatever you are viewing it in, please let me know!

EDIT 2:

Turns out that IE9-11 screws up the SVG if it is resized. This is because IE requires an extra attribute on the SVG element, called "viewbox". Since my SVG width is 1220 and height is 200, I have to add this: viewbox="0 0 1220 200". More information here.

Downside of SVG - Fonts

My third attempt at conversion to SVG is a logo with text. I spent about 4 hours doing it, because it's got 16 different SVG elements without counting the linear gradients (which are creating using elements instead of CSS it turns out). In the end, it looks really great, and the text resizes smoothly in a way that you normally requires javascript:

SVG:

Original PNG:

---

Here's the thing. If you are reading this post via a Windows or OSX -based PC, then the two should look almost identical. If you are using Firefox on Android the same will apply. However, Chrome, Dolphin, and the Android browser itself, will all render this incorrectly. See the comparison below. The top is Firefox for Android, the bottom is Chrome on Android:



The problem is that the font I'm using is Palatino Linotype, which ships default with Windows and OSX (and somehow Firefox for Android??). Chrome doesn't have it though, and so pulls in the default Chrome serif font. It's thicker and so looks too big.

All of which leads me to a fundamental problem of SVG, which is that it's not prerendered, and because of that it relies on the browser having all rendering resources. If you notice in the comparison, there's another problem. The first letter of each word isn't a large size in Chrome. This is because Chrome doesn't support the CSS rule "first-letter" for SVG text elements. As I take SVG into more complex situations, I'm becoming less sure it is really read for primetime. Which is sad, because when I compare the SVG and PNG versions of this logo on my phone, the clarity difference is striking. I just have to find workarounds to all the things that Chrome is screwing up.

In regards to the font-face, I just need to embed the font or have the SVG pull from a hosted source. If one is using a commercial font, however, one runs into issues. Palatino Linoype costs 150 bucks, so for this particular logo I'm out of luck (unless someone knows a free alternative that looks close enough that most people won't tell the difference??). It can be mitigated by using open-source fonts. As to the first-letter issue, the alternative is to split the text elements into more text elements and apply the large size via classes.

EDIT:

I've started a StackOverflow question about workarounds to the first-letter issue. Hopefully someone will have a clever idea.

CodePen.io SVG Feature Request Update

Less than two weeks ago I submitted a feature request to CodePen.io, for the ability to embed a 'pen as an SVG image. Not only did they respond within a few days saying that they'd add it to their list, they actually got it working .... in less than two weeks. Take a look at the logo I converted to SVG a few days ago, emdedded below from CodePen. It looks and acts like a simple image. This is how I'd be calling it in a production site, as an image. It's really easy now to compare the difference between the two image types:

SVG:

PNG:

(Displayed at native resolution)

---

Now, if CodePen could add the ability to take snapshots and version history like JSFiddle does, I'd have everything I need in one service and wouldn't have to use both.

SVG: A More Complex Logo

My logo is extreme simple. It has two shapes and is all straight lines. Because of this simplicity, I had no trouble converting it to SVG, and the entire file ended up being four lines of code. My next challenge, then, is to convert a more complex logo, one which involves more shapes, and shapes which involve curves. My partner at Catstache has a logo which fits the bill. It's complex, has many layers, and is more than one color. So can it be done well in SVG? Lets take a look at the logo in PNG first:



As you can see there is a pen (which also is two letters), plus an ink drop, and a curved line. And this is all on a double circle. We'll need 6six different shapes to create the entire thing. Lets get started!

---

We first need to create the SVG wrapper code. I'm going to give it dimensions of 250 by 250. These will scale when it's displayed, but it's large enough that we won't have to use partial numbers much:

<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
</svg>

---

Inside that code, we'll add all of our shapes. SVG does layering in order of code. The first element that you type will be on the bottom, and the last one will be on the top. So we'll start with a gray circle. To create this, I'm going to use , and put it in the center by saying that the center's y and x coordinates at both 125, and the radius is 125:

<circle cx="125" cy="125" r="125" fill="rgb(24,24,24)" />

This gives us: (JSFiddle)

---

Next up is the white border. Since this isn't on the outside, we need another circle, slightly smaller. It needs a white border, and transparent fill.

<circle cx="125" cy="125" r="115" fill="transparent" stroke="white" stroke-width="4" />

Adding this gives us: (JSFiddle)

---

Now that we have the background done, we need to start on the shapes. I'm going to do the pen first. I'm going to create a line using , and it will have two segments, all straight. The way this is created is really odd. You basically use letters as commands, inside the "d" attribute. "M" with coordinates is where the line starts, then "L" with coordinates means it moves to those new coordinates. A line with 2 segments has 3 points. So we'll use an "M" and two "L"s.

<path d="M192 50 L170 111 L186 117" stroke-width="4" stroke="white" fill="transparent" />

Adding this gives us: (JSFiddle)

---

The bottom portion of the pen shape consists of 4 segments, which means five coordinates. We'll use another , this time with an "M" and four "L"s.

<path d="M183 125 L167 170 L163 161 L146 175 L166 117" stroke-width="4" stroke="white" fill="transparent" />

Adding this gives us: (JSFiddle)

---

Next up, we need the ink drop. When I researched the shape, I found out that it is possible to make an ink drop. It's extremely complex though, so we are going to simply slightly and use an ellipsis. At most resolutions, it will be a negligible difference anyway. I'm also going to rotate it, to get the long radius angled towards the pen tip. This shape is similar to the circle, in that we declare the coordinates of the center. The difference is that there is an x radius and a y radius. Also, we are rotating 15 degrees, which is another attribute.

<ellipse transform="rotate(15)" cx="183" cy="150" rx="3" ry="5" fill="white" />

Adding this gives us: (JSFiddle)

---

Finally, we need to create the curving trail that the pen has already left. This is the most complex part. SVG has several ways to do curves, and to be honest I don't really fully understand them all. But the easiest is a method in which you define 4 points to make a single arc. We still use the , and still use the "d" attribute. Instead of an "L" command, we use a "Q" to create the curve. For this specific shape, we'll need to combine several arcs. After playing around for about a half hour, I got a long that looks very similar to the goal.

<path d="M130,193 C81,208 132,153 71,170 Q32,181 49,158" stroke-width="2" stroke="white" fill="transparent" />

Adding this gives us: (JSFiddle)

---

Success! The final code ends up being:

<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle cx="125" cy="125" r="125" fill="rgb(24,24,24)" />
<circle cx="125" cy="125" r="115" fill="transparent" stroke="white" stroke-width="4" />
<path d="M192 50 L170 111 L186 117" stroke-width="4" stroke="white" fill="transparent" />
<path d="M183 125 L167 170 L163 161 L146 175 L166 117" stroke-width="4" stroke="white" fill="transparent" />
<ellipse transform="rotate(15)" cx="183" cy="150" rx="3" ry="5" fill="white" />
<path d="M130,193 C81,208 132,153 71,170 Q32,181 49,158" stroke-width="2" stroke="white" fill="transparent" />
</svg>

SVG vs PNG Logo Results

Earlier today I wrote about the method I used to convert my website logo from a scalar PNG to a vector SVG file. I wanted to share the results with you.I opened the site up in Firefox, and then CTRL+ zoomed in as far as possible. Then I screenshot'd a before and after:

Scalar PNG Logo:

Scalar PNG Logo:

Another nice feature is a size reduction of the image file. I went from 604B to 294B, which is a better than 50% reduction! Granted, both files are incredible tiny, but I've tested with a more complex logo and the reduction is even better, down from 2340B to 704B.

Converting Logo to Scalable SVG

Background

When coming up with a logo, I took inspiration from the first letter of my name: A. I played around with many variations, and eventually came up with a symbol which resembles an A but isn't exactly the same.



I took my sketches out ideas, and went into Paint.net to come up with a sharp looking PNG icon. I started out large, at 500px by 500px, and then resized down to come up with an icon which looks decently sharp (I've played a gray background under it to make it easier to see):

I plugged it into my website (my WIP website which has been sitting on my localhost for 6 months now, awaiting the availability of andymercer.net), and left it there.

Recently I built a site for my partner at Catstache, and when I tested it on a high-res screen, her logo looked terrible. I realized the problem was that it was the only thing on the site that wasn't vector. I immediately remembered my own logo, and sure enough when I tested, it too looked blurry when zoomed in. I set out to rebuild it in a vector format.

---

Solution

I chose SVG as my format because it's the mist widely support vector format. Every web browser will correctly render an SVG image, and it'll look sharp at any size. The issue is that one has to either build the image with a vector program (which I don't have) or code it manually, which sounds complex. Given my lack of Photoshop, I looked into coding it by hand.

To my surprise, I found that it's actually incredibly simple. You basically imagine a grid, starting from the top-left, and moving down. You define shapes, and give them an X and Y coordinate (higher being further right and down). That's it. I broke my logo into two polygon shapes, and defined each breakpoint.

<svg version="1.1" baseProfile="full" width="50" height="50" >
    <polygon points="15 5, 11 20, 39 20, 35 5" fill="white"/>
    <polygon points="10 25, 5 45, 15 45, 16.5 39, 33.5 39, 35 45, 45 45, 40 25" fill="white"/>
</svg>

This ends up appearing as:

You should be able to see it, and if you zoom this page, it should stay super sharp. And only 4 lines of code. Success!

EDIT: I just viewed this post on my Galaxy S4, and the difference between the PNG and the SVG is enormous. The SVG is far sharper.

Responsive Desgn - More Thoughts

As detailed in my post a few days ago, I'm planning out my sites on a 4 layout setup, (mobile, narrow, normal, wide). I'm not sure that's enough though, and I'm debating splitting mobile into two versions, mobile narrow and mobile wide. Or mobile landscape and mobile portrait.

I starting thinking about this when I had to change up the way my header looked at the high end of mobile down to the low end, and I ended up using a media query inside the mobile css sheet to do it. Which leads me to another point, how to apply media queries.

The first method is to apply them inside a css sheet. You'd link one css sheet to the webpage, then inside that sheet, you'd specify all the styling. Example (inside the css stylesheet):

#wrapper {width:1000px;}

@media (max-width:1050px) {

#wrapper {width:100%;}

}

The advantage of doing this lies in the fact that you can write less code. Styling which doesn't change can be written just once, only things that change have to be re-written.

However, this can get overly complicated. Trying to find the source of a problem can involve digging through the entire sheet, finding the styling on an element in multiple places.

The alternative to this is just creating entirely separate style sheets. Create multiple css files, name them mobile.css, wide.css, etc, and use media queries to link them in the web page. Example (inside the webpage file):

<link rel="stylesheet" type="text/css" media="(min-width:0px) and (max-width:660px)" href="css/mobile.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:661px) and (max-width:1020px)" href="css/narrow.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:1021px) and (max-width:1401px)" href="css/normal.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:1401px)" href="css/wide.css"/>

Besides the opposites advantage and disadvantage of the first method, this method has another advantage which is loading speed. When a page loads, it'll only load the CSS sheets that it needs. If one is on a widescreen monitor, it will load only the wide.css. This takes less time than loading all the css, for every possible screen size.

This is the method that I'm using at the moment. There is one problem though, which is that the most common script for giving IE7-8 the functionality of media queries doesn't work with the second method. I'm trying to find a hack around it, and I'll post it here if I figure it out.
 

Things are Moving!

Any reader of this blog knows that I love web design. HTML, CSS, PHP, jQuery. Recently I've gotten really into mobile, and I'm trying to push myself with the actual graphic design part, though I'm still quite terrible in that aspect. Yet, what is the point in all this, besides it being fun?

I was approached by a good friend of mine a while back about starting a web design company, and turning my hobby into a part time job on the side. (A profitable one, since an average personal wordpress site goes for anywhere from $700 to $2000). Still, it's been slow going, weeks passing with really nothing happening. However, over the past week things have finally started moving.

The first surprisingly difficult hurdle was creating a name. Catchy, simple, and most importantly, not already taken. And if you think that there are lots of names out there not taken, try googling random stuff followed by the word design. We progressed through Blue Hat, to Blue Beard, to Cat Beard, and finally came up with out new name: CatStasche.

Picture, the face of a cat, with a prominent mustache.

That done, we registered the URL, www.catstachedesign.com, and I put up a coming soon page. Then work started on our actual site. It'll be powered by WordPress eventually, but right now we're working with static HTML and CSS just to get the layout working. One major aspect I'm putting a lot of effort into is responsive design, which is one of the few areas that I both A, understand well, and B, am getting in on the ground floor of.

I've decided on standardizing upon 4 widths, and making the design flexible within each of the four.

Mobile

0px - 600px

Smartphones, tablets in portrait mode

Narrow

600px - 1000px

Old monitors, and tablets in landscape mode

Normal

1000px - 1400px

Traditional 1024x768, and very common 1280x1024.

Wide

1400px - Infinity

Widescreen large monitors, normally 22" and above

Some sites have the region that I have as mobile split again, for phones in landscape vs portrait, but all my mobile designs are going to be 100% flexible, using no fixed-length values, so it'll scale, and make another split unnecessary. I've got the layout tentatively working for Wide and Normal, and will be working on the Narrow and Mobile versions over the next few days while my partner finishes the logo and starts working on the color scheme. Hopefully the site should be completely designed within the next week, so I can then spend the week after moving translating it to WordPress. And then we'll really be ready to rock.