Pixelfans

5 Sep 2011

SVG in the eyes of a webdesigner

geschrieben von Pawel

Introduction

With all the hype about brand-new XML formats in 2001, like the newborn SVG, it progressively became quiet. Sure, Adobe had published their plug-in, but the Flash plug-in was also on the rise. These days however,a decade later, no modern Desktop browser needs a plug-in to display SVG anymore. It’s time to use SVG in web-design.

Preparations

There are a lot of well-known programs in the design business. But most of these products were originally made for printing purposes, even though they were later improved to support the writing of SVG-files. In my opinion a file of 150 to 200kbyte is no issue if you want to print it, but it’s way too big for the web. In conclusion to that and because of the existing idea of the semantic web, I advise to specifically consider creating an SVG for the use in web-design. My tool of choice is Inkscape.

Inkscape

Inkscape is made for creating SVG. It’s the native format and it may seem like it might not be completely ready yet. Don’t let yourself be fooled by the version number. A number like 0.48 is the understatement by GPL, but there are some limitations you should know and work around that.

The Swiss knife - always a path

Inkscape mostly saves simple forms as paths, but a person can grasp the command to create of circle better than understand the exact same shape as a couple of points in a path. Change the markup at the end again in the simple form. On top of that, the size of the file becomes smaller.

Use gradients and filters twice or more

An object gets properties. As an standard in Inkscape any filter or gradient is bound to one object. The blur-filter is often used. To change the standard behaviour open the filter dialog which contains a powerful filter editor. You can use all of the filters on more than one object, the process will also reduce the size of the SVG-file.The same feature would be nice for gradients, but unfortunately I only know to code this per hand.

No clone wars

In a lot of cases you will take the same shape. Inkscape offers a way to duplicate the shape, but it is mostly better to use the clone tool. A clone is a use-element and will make rendering faster and the size of the file becomes even smaller, because a use is only a reference and not a couple of points.

Use name which are describing the objects

For further work with your editor, you should get a describing name for the objects or groups. By a right click on the object, you will get a dialog box and be able to do this.

Save the file as optimized SVG

With the version 0.48 Inkscape offers this. In this case unused gradients or filters will be removed from the file and saved in a compact way.

Optimized your code in a editor

Clean up the doctype

First of all, you can clean up the doctype. The rdf-declaration and the meta-tags are not really needed. I advise to you a compact version.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="myID" version="1.1">

Check any kind of abstraction

Find out which gradients you can use for a couple of objects. Use styles, if it’s possible.

Round floats

In my experience, such a high accuracy is not really needed. You can reduce the size of a file enormously by rounding floats. In some cases you can round the point from float to integer, sometimes you need 1-2 Decimal, e.g. in the matrix-Attribute. I use some needful bash-scripts to do that.

Use the title element

One of the advantages of the format is that each element can be equipped with a title. Because of that, you can describe the content further and maybe Google likes that, too.

Put it together

With the upcoming HTML5 specifiation we get a simple way the use a SVG inline in a HTML. Personally, I prefer a way to use a switch in combination with foreign objects.

The switch-element is very powerful. If the browser understands the path command, like all modern browsers, the foreign object will not be displayed. Browsers, like Konqueror or old Internet Explorers display the content within the foreign object. You can combine this with conditional comments.

That sounds great but...

Yes I know, what you are going to say. There is a workaround for the Internet Explore up to version 8, you can use a VML.

Links:

Kategorie: CSS , Ideen , SVG | Kommentare (0) | Trackbacks (0) | Permalink

30 Jun 2011

DropBox und PHP

geschrieben von Pawel

Als ich eine Einladung für die DropBox bekommen hatte, fand ich das zunächst nicht spektakulär. Unter Linux bin ich es gewohnt, nahezu jedes Laufwerk mounten zu können. Komfortable Programme für Mobiles und jedes Betriebssytem und das automatische und schnelle Synchronisieren haben mich überzeugt. Daten in die DropBox zu schieben ist so einfach, dass es jeder kann, der sich mit einem Smartphone oder Computer ein wenig auskennt.

DropBox Logo Seit Mai 2010 steht auch eine API zur Verfügung, die aber Wünsche offen lässt. Es gibt nur eine Handvoll Methoden. Irritierend ist dabei auch die Begrifflichkeit. Natürlich ist der Zugriff nicht nur vom Smartphone möglich.

Die für mich naheliegende Anwendung per PHP Daten aus der DropBox in das CMS seiner Wahl zu kopieren, scheint niemand bisher realisiert zu haben. PHP scheint von den Entwicklern ohnehin nicht Sprache der Wahl zu sein, obwohl es eine Klasse bei Google Code gibt, die aber sehr viele Abhängigkeiten mitbringt.

Glücklicherweise hat sich Tijs Verkoyen dieses Problem angenommen und eine kompakte Klasse entwickelt, die sich auch der OAuth-Problematik annimmt. Damit lassen sich alle Methoden der API aufrufen. Tijs hat eine Dokumentation zur Verfügung gestellt.

Zur Nutzung benötigt man neben der E-Mailadresse und seinem Passwort die zwei Keys, die man bei der Registrierung einer APP in der DropBox erhält.Die API erhält keine Methode, um Dateien auf den eigenen Webspace zu verschieben. Deshalb muss dort die Datei neu anlegt werden und den Inhalt des Response hinein schreiben.

$dest = 'test';//folder on your pc
if (isset($_GET['file'])) {
//kleine Pfadverschleierung
$dbfile = x0rdecrypt($_GET['file'], $secretxorkey) ;
$response = $dropbox->filesGet($dbfile);
//sichere Dateinamen
$filename = array_pop(explode('/', $dbfile));
$file = base64_decode($response['data']);
//Datei neu im Zielverzeichnis anlegen
$file_copy = fopen( './'.$dest.'/'.$filename,"wb");
//schreiben und schließen
fwrite($file_copy, $file);
fclose($file_copy);
}

Da der Beispielcode diesmal deutlich umfangreicher geworden ist, habe ich bei Github einen Fork der Klasse angelegt und die Beispieldateien ergänzt. Das Ergebnis ist eine übersichtliche Oberfläche, die es ermöglicht Dateien anzuschauen oder zu verschieben. Screenshot des Webzugriffs auf die DropBox

Kategorie: Ideen , PHP | Trackbacks (0) | Permalink

8 Jun 2011

Box Reflection mit CSS für Webkit und Fox

geschrieben von Pawel

Im letzten Blogbeitrag habe ich eine einfache Möglichkeit für die Simulation einer Textreflektion gezeigt. Bisher gelingt aber die Spiegelung eines gesamten Containers nur mit -webkit-box-reflect, wie es im Webstandardblog für die Webkitbrowser beschrieben ist.

Da mein Lieblingsbrowser der Firefox bleibt, habe ich nach einer Möglichkeit gesucht, diesen Effekt auch dort nur mit CSS verfügbar zu machen. Firefox unterstützt zwar die o.g. Eigenschaft nicht, bringt aber mit dem -moz-element eine eigene Eigenschaft mit, jedes beliebige HTML-Element als CSS-Hintergrund verwenden zu können. Erwartet wird lediglich eine id eines Elements.

Ich habe das Beispiel dahingehend verändert, dass es einen zusätzlichen Container enthält, der die Reflektion für den Firefox anzeigt. Der Container vcard wird nun statt mit einer Klasse mit einer id gekennzeichnet.

Die eigentliche Arbeit wird durch folgende CSS-Anweisung geleistet:

background: 
-moz-linear-gradient(top, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%),
 -moz-element(#vcard) no-repeat;
-moz-transform: scale(1,-1);

Es werden mehrere Hintergründe genutzt. Ein Farbverlauf von Transparent zu weiss, die aber aber "umgedacht" werden muss, da transform den gesamten Container und damit auch den Farbverlauf kippt.Der zweite Hintergrund ist der Inhalt von #vcard. Eine Besonderheit gibt es im Unterschied zu den Webkitbrowsern, es wird tatsächlich nur der Inhalt verwendet der innerhalb des Containers steht. Sollen CSS-Anweisungen mit übertragen werden, müssen sie als Inlinestyles geschrieben werden.

Das erweiterete Beispiel für Webkit und Firefox:

Box Reflection mit CSS

Zum Vergleich das Original des Webstandardsblog:

Beispiel des Webstandardsblog

Nachtrag (02.07.2011)

Lea Verou hat sich auch mit dem Thema beschäftigt. Ich habe ihr Beispiel genutzt, um mein Beispiel weiterzuentwickeln.

das verbesserte Beispiel

Kategorie: CSS | Trackbacks (0) | Permalink