What about SVG files?

Previous post I wrote some vector files but not the kind you are used from me.
Usually I use .PDF but in the case I use .SVG files, and you want to know what that is about…

What is a .SVG file?

Wikipedia on this subject: http://en.wikipedia.org/wiki/Svg

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

The official info can be found here: http://www.w3.org/Graphics/SVG/

Scalable Vector Graphics (SVG)
XML Graphics for the Web

What is useful about this file?

It’s very small, most modern browsers can show it and vector edit programs like (online) Aviary Raven (press create and file > import files) or offline Inkscape or Illustrator.

Why doesn’t use everybody this in the papertoy scene?

There is no uniform way to show it in a blog post; every browser works different. I haven’t worked with it a lot and there seem to be some problem with fonts embedding (can also be my inexperience). And people are used to .PDF and viewing files in Adobe Reader (or another .PDF viewer). Another “problem” is that WordPress (this blog runs on it) doesn’t recognize a .SVG file as an image (it labels it as a dangerous file!!)

Example

Business holder template

Download the template as .SVG (use “Save Link As…”)

Business stand (simple) template

Download the template as .SVG (use “Save Link As…”)

If you don’t see any images, you probably using old browser.
I have tested this in Firefox 3.6 (OSX and XP), Google Chrome (XP) and Internet Explorer (XP)

How to create or change a .SVG file?

There is a Firefox addon: svg-edit. This can be used for creating files but you can’t open them yet (net version will) so you have to open a .SVG file in a text editor (like notepad++) and copy paste it.
There is an awesome project online called Aviary that also has a vector edit web application: Aviary Raven. You first need op press “create” and then it’s possible to import a file (file > import files). You can also use Inkscape (freeware) or Adobe Illustrator ($$$).

How to download?

Use “save as” on a link or “save this page” if you have clicked on the link.
Make sure that the file you want to save, end with the extension .SVG (Firefox save this file as a .XML file for example)

How to open?

Use Aviary Raven (press create and file>import files), Inkscape or Illustrator.

How to print?

You can print from Firefox: open the link and print.
Are you used to .PDF files? Save the .SVG files (link) to your hard drive and visite www.fileformat.info and convert .SVG to a .PDF (remember to save the file as .PDF : in my case it change the extension to .HTM)

Should everybody start using SVG files?

Yes and no: yes because they are very small and most of the modern browsers can show the image…. but sadly not in a page/post which makes as difficult to use as .PDF.
And .PDF is what people know… It will probably get bigger if Firefox will treat .SVG files as an image file like Google Chrome and Safari does.

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

Papertoy bizz – part 2

Read my previous post about Papertoy bizz – part 1.

But to be short about it: I’m currently working on making that papertoy bizz somewhat official.

And you need a business card and that got me wondering about some other business card related items:

  • Business card stand
  • Business card holder

I couldn’t resist looking for paper versions of these items.

I used my day jobs business card for this: I think they have a common size use in the Netherlands.
The card is 85mm x 55mm (W x H)

In this post I’ll be focusing on the business card holder!

Business card holder

I found two versions that I want to mention.

The Food Box Wallet (can be used as business card holder)

The Food box wallet from replayground.com

Business card holder example

I don’t have to vectorized it, because they have a nice .PDF file for us.
Download the template: “save as”

But I did it anyway because it now fits the standard business card:

Download the template as .SVG (use “Save Link As…”)

Placing the elastic can be somewhat difficult so here some extra instructions

Paint Chip Card Holders!

The other I found at designverb.com
Paint Chip Card Holders
They look awesome don’t they!!
In the Netherlands we don’t have Home Depot or a shop that uses these cards but why don’t use a cereal box or other box made out of carton (or just design one…).

There is a .JPG template
Card holder template
This template can be use to modify it to your own business card dimensions:

To change the size of the template, make ‘a’ the height of your card, and ‘b’ the thickness that you want the card holder to be.

But here is mine vector version:

Download the template as .SVG (use “Save Link As…”)

For building instruction visit designverb.com page about the paint chip card holder.

Here the vector files:

Business wallet template

Download the template as .SVG (use “Save Link As…”)

Business holder template

Download the template as .SVG (use “Save Link As…”)

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

Twitter Weekly Updates for 2010-03-20

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

Papertoy bizz – part 1

I’m currently working on making that papertoy bizz somewhat official.
So I’ve started a business (eMCeeKay.nl <-- not a lot to see there yet) with a officials KvK (Kamer van Koophandel = chamber of commerce) etc….

And you need a business card and that got me wondering about some other business card related items:

  • Business card stand
  • Business card holder

I couldn’t resist looking for paper versions of these items.

I used my day job business card for this: I think they have a common size use in the Netherlands.
The card is 85mm x 55mm (W x H)

In this post I’ll be focussing on the Business card stand!

Business card stand

Simple business card iPhone iPod stand

This one is so simple that I didn’t search further
End result Business card stand from a business card
I found it on instructables.com so visit them for the whole story.

But I need vector files, not just a sketch! So I converted the instructions into a vector file:

And now the download: this is a little experiment so hope it works:
Download the template as .SVG (use “Save Link As…”)
Use the standard functionality from your browser and save it as “.svg” (Firefox will save it as .XML but that file won’t open in Illustrator)

btw: there is even an instruction how to make this stand without a template; just with folding and another business card! Just visit the post and scroll down the comments.

iPhone and iTouch paper stand dock

But then someone pointed me towards this:
iphone-and-itouch-paper-stand-dock
An awesome paper stand from dessinemoiunobjet.com by Julien Madérou. But I see no reason why we can’t use it for a business card stand.

You can download the original .PDF file here (use “Save Link As…”)

But because we don’t need to have a cord running through, I simplified the template a little bit:

Download the template as .SVG (use “Save Link As…”)

If you are having problem to build it, visit the original post: Iphone and Itouch paper stand / dock or open the original PDF (here).

Here the vector files:

Business stand (simple) template

Download the template as .SVG (use “Save Link As…”)

Business stand template

Download the template as .SVG (use “Save Link As…”)

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

PUMA – States/Suede/Clyde – urban paper sneaker – part2

Today I present: PUMA – States/Suede/Clyde – Urban paper sneaker

Want to read more about the process visit this blog post or this one.

Because a picture says more than a thousand words:

Paperkraft fans will recognise the logo: this is a paper sneaker made for Ron Rementilla from Paperkraft.blogspot.com.
He has written about my PUMA First round papertoy and suggested that people who wanted a template should leave a comment…. And Ron mentioned that he wanted one too…. I’m sure that he didn’t mean this, but I needed to create a skin for this model and thought it would be a nice gesture to thank Ron.

You can download the file for the PUMA – Paperkraft – Urban paper sneaker here:

The .ZIP file contains a .PDF
(You can use freeware like FilZip or 7zip to extract a .ZIP-file and read a .PDF with Acrobat or Foxit)


But I know a lot of people want to customize this PUMA sneaker, so if you are interested in creating a custom paper sneaker you can download the Blank PUMA – States/Suede/Clyde – Urban paper sneaker here:

The .ZIP file contains a .PDF
(You can use freeware like FilZip or 7zip to extract a .ZIP-file and read a .PDF with Acrobat or Foxit)

If you like this, leave a comment. If you build one, show me a picture. If you customize one, … you get the picture ….

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

PUMA – states/suede/clyde – urban paper sneaker

As I mentioned before: I always wanted to do a papertoy sneaker.

When I finished my first PUMA sneakers, and posted it on NPT (Nice Paper Toy), some people mentioned that they liked the model but that there favorite PUMA sneaker is the states/suede/clyde.
I didn’t know that the PUMA states/suede/clyde is a b-boy classic.

So I couldn’t resist to make them too:

I don’t have a download link for this one, and no design yet….
But that will be fixed very soon.

PS.
The excellent Ron Rementilla from Paperkraft.blogspot.com has written about my PUMA First round papertoy (thx for that).
And suggested that readers who wanted a template, leave a comment….

Till now 10 people did and they have received the (WIP) templates…
I call the templates WIP because the instructions are not ready yet.
And because I wanted to make the PUMA clyde first, they are not ready yet.

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

Twitter RSS reader – part 2

This is a “must-read” update for twitter rss reader in flash as3.


read here the complete (dutch) error message

Stupid, stupid, stupid, I already knew this: Flash cross-domain security.
Which simple says that it’s not allowed to “get” anything from another website unless the server has a crossdomain.xml.
The nasty part is that, while you are testing in Flash IDE nothing goes wrong. So I only bumped into this when I put it on my server…

So what to do?

  1. Ask Twitter to change there crossdomain.xml and add my domain…… (is this really an option?)
  2. Find something around the crossdomain security from Flash

Luckily solution two is the easiest one: use a proxy to get the data we want.
Because PHP doesn’t have the same restrictions as Flash has we will be using a proxy.php.

This is how it works: Flash wants a crossdomain.xml if you “get” data from another server, but if you “get” data from the same server there is no problem. So we will be asking the proxy.php to “get” the xml/rss and serve it to Flash.

So instead of loading the data directly from Twitter
http://twitter.com/statuses/user_timeline/27657030.rss
We will be using the proxy instead
http://yoursite.com/xml_proxy.php?url=http://twitter.com/statuses/user_timeline/27657030.rss

I didn’t write the proxy myself:
The proxy that I used can be found here: http://xmlrpcflash.mattism.com/proxy_info.php (it has some extra explanation about the subject )
This proxy can be use for all sorts of xml, and any server.

As always I’m reinventing the wheel: this group needed a specific solution but is nice to read more about it:
http://woveninteractive.net/2009/02/twitter-in-flash-getting-past-the-securityerrorevent/
They wrote something similar, but a proxy more specific suited for twitter and the use of twitterscript.

Update #1: I found another proxy.php (I really don’t think you need another, but choices are nice :D ).
PHP Proxy Script for cross-domain requests
Sorry for the dutch error… I have a dutch version of XP (not my choice)

Error #2044: Niet-afgehandelde securityError:. text=Error #2048: Schending van beveiligingssandbox: http://emceekay.nl/paper/flash/twttr.swf kan geen gegevens laden van http://twitter.com/statuses/user_timeline/27657030.rss.
at nl.emceekay.twttr::TwttrBase/getFeed()
at nl.emceekay.twttr::TwttrMain()
  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

Twitter rss reader in Flash as3

Update #1: must read this post, otherwise this code will fail when you place it on your server!

I recently started my own company (eMCeeKay.nl) and I need to make a website for it…. Not really a problem besides that I don’t have any time to create a design.

So I was thinking about a easy way to update this website without spending extra time on that.

Because the main focus of the company is papertoys (urban papertoys), I need design or papertoy related info in my my new website ().

And I came with two ways to update it without extra effort: twitter (I tweet about a lot of stuff but primarily about papertoys) and this the content on this blog (category: urban-papercraft).

I started with the Twitter part.
There are two Twitter AS3 libraries that “speak” to the Twitter API: twitterscript/ and tweetr/.
But after reading the source I concluded that it was a little bit to much: I don’t want to tweet from emceekay.nl or do searches, so that was not the way to go.

A little google search gave me the solution: http://www.theflashlogs.org/flash/displaying-twitter-feeds-in-flash-with-rss/, simple using the standard rss from Twitter (in my case: Matthijs Kamstra – Twitter – rss).

The code on theflashlogs.org is pritty simple, and very easy to use.
So my code is a little addition to that, I need some stuff done to the rss feed:

  • remove “MatthijsKamstra:” form the title
  • convert @paperkraft to a link
  • convert #Mecha6 to a link
  • convert http:// to a link

Here is my code:

package nl.emceekay.twttr
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	/**
	 * // nl.emceekay.twttr.TwttrExample
	 * ...
	 * @author Matthijs Kamstra aka [mck]
	 */
	public class TwttrExample extends MovieClip
	{
		//default: http://twitter.com/matthijskamstra
		private var url:String = "http://twitter.com/statuses/user_timeline/27657030.rss"; 

		private var _txt:TextField;

		public function TwttrExample()
		{
			stage.scaleMode = "noScale";
			stage.align = "TL";

			// generate textfield
			_txt = new TextField()
			_txt.x = 10;
			_txt.y = 10;
           		 _txt.width = stage.stageWidth - 20;
           		_txt.height =  stage.stageHeight - 20;
			_txt.wordWrap = true;
			_txt.multiline = true;
			_txt.autoSize = "left";
			addChild(_txt);

			// start
			getFeed(url);
		}

		//////////////////////////////////////// loading rss / show rss ////////////////////////////////////////

		private function getFeed (inURL:String) : void
		{
			_txt.htmlText = "getting tweets";

			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, onFeedHandler);
			loader.load(new URLRequest(inURL));
		}

		private function onFeedHandler (e:Event):void
		{
			_txt.htmlText = "";
			var _feed:XML = new XML(e.target.data);
			var _item:XMLList = _feed.channel.item;
			for each (var feedItem:XML in _item){
				var _title		:String = feedItem.title;
				var _pubDate	:String = feedItem.pubDate;
				var _link		:String = feedItem.link;

				_title = convertTweet(_title);

				_txt.htmlText += _title + "<br><i>" + _pubDate + "</i><br><br>";
			}
		}

		//////////////////////////////////////// twitter specific ////////////////////////////////////////

		// one place to convert the tweet
		private function convertTweet (inString:String):String
		{
			var _str:String = inString;
			_str = twttrStripName(_str);
			_str = twttrConvertHTTP(_str);
			_str = twttrConvertMention(_str);
			_str = twttrConvertHashtag(_str);
			_str = twttrConvertSmileys(_str);
			return _str;
		}

		// remove the writers name from the tweet
		private function twttrStripName (inString:String):String
		{
			var _str:String = inString;
			var _charNumber:Number = _str.indexOf(":");
			return _str.substr(_charNumber + 2);
		}

		// convert http-strings to links
		private function twttrConvertHTTP(inString:String):String
		{
			var _str:String = inString;
			var _array:Array = _str.split(" ");
			for (var i:int = 0; i < _array.length; i++)
			{
				var _str2:String = twttrStripChar(_array[i]);
				if (_array[i].indexOf("http") != -1)
				{
					_array[i] = "<u><a href='" + _str2 + "' target='_blank'>" +_array[i] + "</a></u>";
				}
			}
			return _array.join(" ");
		}

		// convert mentions (@) to links
		private function twttrConvertMention(inString:String):String
		{
			var _str:String = inString;
			var _array:Array = _str.split(" ");
			for (var i:int = 0; i < _array.length; i++)
			{
				var _str2:String = twttrStripChar(_array[i]);
				if (_array[i].substr(0, 1) == "@")
				{
					_array[i] = "<u><a href='http://www.twitter.com/" + _str2.split("@")[1] + "' target='_blank'>" +_array[i] + "</a></u>";
				}
			}
			return _array.join(" ");
		}

		// convert hashtags (#) to links
		private function twttrConvertHashtag(inString:String):String
		{
			var _str:String = inString;
			var _array:Array = _str.split(" ");
			for (var i:int = 0; i < _array.length; i++)
			{
				var _str2:String = twttrStripChar(_array[i]);
				if (_array[i].substr(0, 1) == "#")
				{
					_array[i] = "<u><a href='http://twitter.com/search?q=%23" + _str2.split("#")[1] + "' target='_blank'>" +_array[i] + "</a></u>";
				}
			}
			return _array.join(" ");
		}		

		// TODO: [mck] convert :)  to a smiley image
		private function twttrConvertSmileys(inString:String):String
		{
			var _str:String = inString;
			return _str;
		}

		// remove "strange" characters from the end of the string
		private function twttrStripChar(inString:String):String
		{
			var _str:String = inString;
			var _charArray:Array = [',', ';', ':', ' ', '-', '_'];
			for (var i:int = 0; i < _charArray.length; i++)
			{
				if (_str.charAt(_str.length - 1) == _charArray[i]) {
					_str = _str.substr(0, _str.length - 1);
				}
			}
			return _str;
		}

	} // end class

} // end package

Currently I have only this proof of concept, but soon I will post the example on emceekay.nl

Because this is part one of what I want to do, and don’t want to search for every link again, I’m posting also the WordPress link here (it’s just because I’m lazy).

So here the feeds I will be using:

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts

II LOVE mag – YEBOMAYCU

I’m in the latest edition of the II LOVE magazine from Marko Zubak

In this issue we will remain on the first phase of creation, the form. Here the accent is put on the sculptural aspect of denuded paper toys, giving an impression that each one of them represents it’s own species.
Here is shown a selection of more than 50 paper toys, but of course, there are lot of other different kinds of paper toys out there. Many great designs are left out because of various reasons and I feel really sorry for some of them.

by Marko Zubak, creator of II LOVE magazine

Download II LOVE magazine from YEBOMAYCU.

  • del.icio.us
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati
  • Digg
  • email
  • Hyves
  • Facebook
  • Google Bookmarks
  • MySpace
  • LinkedIn
  • Twitter

Related posts