SURPR!SE
サプライズ
2013.02.23
Solving 2 problems at once Portability & anti-aliasing for logo & type Design
Logo and type design suffered from two main disease: anti-aliasing and document portability, even right now in our post web2.0 area. Basically embed as bitmap logo were part of the asset and so server and path dependent. Then the bitmap format made them clumsy on printed version if not said ugly due to anti-aliasing mismatch. You still can waste time designing pixel-perfect bitmap logo set but think twice before then consider the right technology to use: SVG (see below: 4,430 bytes)
SVG is for modern browser so our main bottle neck is once again Internet Explorer version 8.*. If you still have need to target vintage browser you may still need this bitmap version of the logo or you should turn to useful javascript library for vector drawing such as Raphael. But external library or coding from scratch a IE8 supported code may break one of our goal here which is portability. IE8 has its own vector namespace coded “vml” and here is good sample code to evaluate the amount of work to get it compatible: http://jsfiddle.net/ntoniazzi/gHLPE/
But let’s remember that IE8 is not supported anymore even by microsoft and let’s come back to our world.
There are 2 ways to embed vector graphics in a HTML document: You can directly write it with the SVG tag or you can encode it as base-64 RAW data in the css style-sheet. The SVG HTML tag is straight forward. Your SVG editor is already HTML compatible. Optimisation may include cutting white space or encoding critical ascii character. Embedding logo as svg would result in a small amount of code, light and fair enough to hard coding it in portable document.
A last word on SVG is about its potential in filtering bitmap data. This feature will be developed in its own lab. Refer to the W3 SVG reference for more detail on its image processing filter. An other post will also deal with the runtime manipulation of SVG by javascript as SVG is rendered as a DOM element and so are its properties public for edition.
参照サイト
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
http://raphaeljs.com/
https://code.google.com/p/svg-edit/
http://philbit.com/svgpatterns/
http://inkscape.org/