Thursday, September 11, 2014

How Far We've Come in 13 Years

It's been 13 years since extremists attacked the USA. 13 years, and the world seems just as dangerous as it was before. The heady days of the Arab Revolution, when waves of democracy and popular rule were sweeping the middle east, are long gone. Egypt is back where is started, Syria never finished falling in the first place, and Libya is in the middle of a new civil war. Not to mention ISIS. Oh and Ebola is slowly decimating Africa, country by country.

But consider this. Osama Bin Laden is dead, along with nearly every senior Al Qaeda commander from the time. The new World Trade Center building is almost complete. Unemployment is getting close to falling under 6%, and the GDP is up. Plus technology marches on. Direct brain to electrical connection, internet so fast you could download the Library of Congress in minutes, fully electric cars which go hundreds of miles between charges, and even reusable rockets which can land vertically, all coming down the pipeline.

The world is in a race. A race between technology and entropy, and I speak of entropy metaphorically. Entropy is the forces of chaos, the forces of destruction. Extremist religion (of all flavors), global climate change, diseases such as Ebola, poverty, and even just the natural slow progression of all governments into totalitarianism.

And it isn't new. History and human civilization are cyclical. The forces of chaos knock everything down, and then we slowly rebuild. We get knocked down, and we rebuild. 1200BC, 500AD, both times civilization collapsed. But each time, we retained more technology than before. The only question that remains is how far we can get before the next collapse. I have high hopes. I look around and see how fast we are progressing, and I think we can beat it. I think that my generation can be the first to permanently colonize something that isn't on Earth. We we can spread out, we can finally break the cycle, and then how far do you think we'll go?

Wednesday, September 10, 2014

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:

Monday, September 8, 2014

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.

Sunday, August 31, 2014

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.

Monday, August 18, 2014

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.

Sunday, August 17, 2014

Shift In Focus

Over the years, this blog has been somewhat of a scattershot of topics. Initially, it had a very political/civil liberties focus, but that branched into more theoretical topics, such as ethics and philosophy. As I moved into web development, and WordPress, those became topics of greater frequency. And scattered throughout have been posts on music, humor, and even poetry I've written.

You may have noticed that I haven't posted much about politics for some time, and the reason is that politics has become increasingly depressing to me. We live in a society which increasingly embraces constant surveillance, in which we daren't videotape a police officer out of fear of retribution. A society in which we can be sent to prison for shooting a home intruder who invades without a warrant or even warning, just because they happen to have a badge and made a mistake on the address. There are some bright spots. Marriage equality has won. The falling tree may not have hit the ground, but gravity took over years ago and the conclusion is foregone. But in almost all areas, the world has become a scarier and more depressing place.

I also don't write about civil liberties as much, because I have grown increasingly disillusioned and fed up with all sides. It is absolutely wrong to judge someone for the color of their skin, or for the person they love. But that cuts both ways, and as someone who has been judged for being a white male by my supposed allies, my willingness to get involved has decreased over time. Yes, I understand that I have white privilege, and any automatic judgement I get for my skin is nothing compared to the judgement that a transgender person of color gets. But time and time again I see a level of automatic hate coming from the non-cisgendered community that almost approaches the level of hate (that I've fought against) from the fundamentalist religious faction.

Which brings me to my final point. What I HAVE been writing more about recently is code. The beauty of PHP, of HTML, of CSS ... is that they are languages of utter and complete honesty, and logic. If you write something, it's either correct or incorrect. There's no debate, there's no hatred. Certainly people might have differences of opinion on best practices, or what browser to use, but in general it's a much more pleasant area to spend my time in. Additionally, the communities are some of the least judgmental communities that exist. No one cares about who you are or what you look like. If you can write good code, or design great UX, or even just come up with good ideas ... that is all that matters. WordPress contributors are from all around the world, and almost no one brings their societal/cultural baggage with them. Code is king, and I like code.

Saturday, August 16, 2014

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>