ACCESS

東京本社
東京都港区六本木7-2-29 VORT乃木坂I-3F
岡山オフィス
岡山県岡山市北区磨屋町10-20 磨屋町ビル 6-B

SURPR!SE

サプライズ

  • HOME
  • サプライズ
  • Solving 2 problems at once Portability & anti-aliasing for logo & type Design

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.

参照サイト

An SVG Primer for Today’s Browsers. W3C Working Draft — September 2010
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
Raphaël — JavaScript Library
http://raphaeljs.com/
SVG Patterns Gallery
http://philbit.com/svgpatterns/

CONTACT

お問い合わせ

WEBサイト制作や、システム・APP開発など、
制作案件に関するお問い合わせは
下記よりお願いいたします。

案件のご相談・お問い合わせ

パートナー企業募集

スカイリンクでは一緒にものづくりをしていけるパートナーを募集しております。

  • ・受発注問わず相互に協力関係を築けるパートナー企業
  • ・業務委託等、個人で活躍されているクリエイターの方

また、お仕事でなくても気軽に情報交換できるようなお付き合いも大歓迎です。

お問い合わせ

採用情報

時間や場所に縛られない。
リモート業務を実施しているスカイリンクでは
東京だけではなく、岡山をはじめとした県外各所から積極的に採用中です。
「新鮮な驚き」を一緒に考えてくれる仲間を求めてます。

採用サイト