Catégorie : Scalable.Vector.Graphics

works, experimentations , ideas for/from SVG ressources

Inkscape patterns/ les Motifs dans Inkscape sans l’outil de découpe

This is a very little imaged tuto destinated to get around what seems to be a bug in Inkscape , while setting  a clip on 2 objects then trying to make the resulting group  a pattern. ( resulting in blank rectangles )

Bonjour aux lecteurs curieux de Ubuntu-fr.org, j’espère que cela pourra en aider plus d’un 🙂

Je rappelle que je ne me suis pas appliqué à faire quelque chose de précis ;

[nggallery id=5]

(python) Playing with Pixel Art to SVG

Hi,

Well I’m actually searching cool stuff concerning svg. So I’ve been searching on pypi all about SVG using pip in my terminal.

for those who don’t know it on a debian system:

sudo apt-get install python-pip

then

pip search svg 

You’ll find there a very nice little tool called ‘pixel2svg’

I was surprised of its interest but I consider it finally very useful : rather than trying to vectorize very little pictures ( like icons ) in Inkscape, or to completely re-do it , use it to keep the pixel-art-style  with great results.

Very simple to use, just like this:

pixel2svg.py eboy.png

I’ve taken a picture from EBOY ( http://hello.eboy.com/eboy/ ) to play with.

pixel-art ,icon size
pixel-art ,icon size

Let see the result:

resulting SVG

Then let’s play with it:

Make whatever you want now with a clean drawing

g2961

 

a styled pixel-art vecorized
give it the style you want

Before that I have tested the Inkscape’s vectorization tool :

Comparing pixel2svg vs inkscape's vectorization tool
Comparing pixel2svg vs inkscape’s vectorization tool

 

Tell me if it can also be useful to you , I wonder what you would be able to do with it 🙂

NB:  Now you can also apply this to Qrcodes . How ? Well… Have you ever tried to redirect one of them?

Sliding with Hovercraft!

Hey I’ve discovered a new  python-based presentations engine:

hovercraft logo           Hovercraft!

« The merge of convenience and cool!

Hovercraft! is a tool to make impress.js presentations from reStructuredText. For a quick explanation, see the demo.
Features:

  •     Write your presentations in a text markup language. No slow, limiting GUI, no annoying HTML!
  •     Pan, rotate and zoom in 3D, with automatic repositioning of slides!
  •     A presenter console with notes and slide previews!
  •     The slide show generated is in HTML, so you only need a web browser to show it.
  •     Easy sharing, as it can be put up on a website for anyone to see!

Full documentation is available at readthedocs.org, and also in the documentation subdirectory. »

source: https://pypi.python.org/pypi/hovercraft

What a wonderful tool for all webdesigners, presenters, devworkers !
No need to use -free or not – softwares with their own extensions, no conversions needed as it makes all the work and create an index.html with css.
But all is not as easy as you’ll have to install it on your system, before creating your first reStructuredText.

That’s why I’ve made a little tuto for interested (and noob) people like you 🙂

Well, first of all I work on a Linux system ( Ubuntu 12.10 ) so you’ll have to translate the commands for yours (I use apt-get to download the missing libraries.)

Fine, so download the hovercraft folder on the dev page there: https://pypi.python.org/pypi/hovercraft

Well done! So you’ll find there a lot of files and folders , but the interesting one is « setup.py »

Ok, so are you fluent with Python ? ==> you can pass this part and go down to « installing missing libs« 

If not, continue reading:

« Python is a programming language that lets you work more quickly and integrate your systems more effectively. You can learn to use Python and see almost immediate gains in productivity and lower maintenance costs.

Python runs on Windows, Linux/Unix, Mac OS X, and has been ported to the Java and .NET virtual machines. »

source: www.python.org

I won’t make a course on python there but I want you to understand you’ll have to build and install Hovercraft! in order to use it as a shell tool.

So make sure to install python on your system using the command shell ( or terminal) :

 sudo apt-get install python3.2-dev  ( here we install python3.2 since Hovercraft has been written in Python3; it won’t work if you use python 2.7 for multiple reasons I’ll let you search on Python.org )

Installing missing libs :

Hovercraft! needs 2 libraries to be compiled: libxml2 and libxslt ; here we’ll download the dev versions.
You can get them with:

sudo apt-get install libxml2-dev libxslt-dev

then

sudo apt-get install python-lxml

now if not installed, download python3-setuptools:

sudo apt-get install python3-setuptools

and you can finish with:

sudo easy_install lxml

That’s done for this part;

Nice; there you have all to build and compile Hovercraft! on your system.

Bulding and compiling:

You have to reach Hovercraft! folder to see the setup.py file

 cd ~/hovercraft-1.1/
 then type « ls » to check all the contained files and folders

ok, fire!

 sudo python3.2 setup.py build

once finished:
 sudo python3.2 setup.py install

Normally you’ll read some errors messages but it doesn’t mind;

I’ll let you there discover the well-made tutos :

linked on a dedicated page:

https://hovercraft.readthedocs.org/en/1.0/

In the folder Docs/examples/ you can edit all the .rst files , as they are text files and try to make them html presentations with for example:

hovercraft tutorial.rst ~/yourdestinationfolder

Open Index.html with your favorite browser and enjoy 🙂

ex: http://fabkzo.com/hovercraft/tutorial.html

Making SVG+js presentations with sozi

Hi there,

Today I’ll just remind you Sozi’s existence , has a plugin for inkscape. That’s free and easy to use, no need to code, just do it graphically.

Very nice to make « Prezi-like » presentations ; you can add video and audio if you want, but just be sure that your browser(s) implement it well ( actually i’m a bit slow under firefox, very nice with chrome )

The top should be to make it as there: http://svg-wow.org/blog/2010/08/14/camera/  but forget it, your « slides » won’t move like that;

If you’re more interested with javascript , also exists impress.js : http://bartaz.github.com/impress.js/#/bored

but a bit harder to understand.

The good point for using Sozi is that  it generates a SVG file , giving you the possibility to use it as a page, to implement it in a html page etc, etc…

 

There I call it with an iframe, as on sozi’s site ( http://sozi.baierouge.fr/wiki/doku.php ), to make it interactive and to adjust its size.


 

but you can also use this link to see it in fullscreen as an SVG page ( copy and paste in your browser) :

fabkzo.com/wp-content/uploads/2013/02/qrcodesozi.svg

 

Create an animated SVG wallpaper – searching the WOW effect.

High fashion today in the field of web design is to show that we can take advantage of the latest Webtechs by loading CSS3 effects and javascript, based on html5 .

Hence the parallax effects, horizontal sites, puzzles, games, etc. … with canvas beacons… and I forget, often bringing only 2 minutes of distraction, each visitor subculturing and improving, when he can, the ideas of others.

The arrival of SVG tag is also important because it « forced » to have the latest browsers supporting this format natively ( in the case of IE9). We can interact with the elements included in this tag using javascript (Raphael.js) but in this case we must consider the SVG as part of the site, a frame not a picture.

And this is what bothers me-

In fact we can even assign a CSS3 background to the tag-as well as <body>, so that one can decorate a vector image with a pixel image (photo) without making part of the SVG beacon.

You can also animate and render all interactive as in this example: http://www.netriver.co.uk/demo/animated-svg-background.html (thanx to http://davidsbigthoughts.blogspot.fr/)

I personally have a more affordable solution, I applied to this blog:

I call my SVG file containing SMIL animations by CSS! Such attributes are part of the image itself and are understood by a compatible browser: your wallpapers are moving 🙂 Warning: this does not work with javascript animations and you can’t interact with it . In the case of a browser that does not support SMIL you have to « think » your image as a fixed one. Of course you can think about doing the same by calling a .gif cinemagraph with CSS, but the weight will not be the same (!)

Ditto for CSS animations, if you do not have the software (expensive) good luck … Here my file weights only 10 K0 and 22 K0 for this example:

 

Nota: For those telling that it’s heavy looking at cpu loads I’ve got 2 Tips:

  1.  You can stop it once by pushing “Esc” key
  2. Want to make it with flash? Hey let me know and show me something “universal” and lighter that you can stop whenever you want.

SMIL Animated star button

Today one little thing;  I’m preparing  something bigger . I just need more time;

This is an animated star with SMIL attributes, even I know we can do it with ecmascript.

So I’ve tested there a synchronisation between all elements after an interaction with the visible star.

Well, if you want the interaction working well you have to implement it in a Html5 based page ,there you’ll have to display it full to see the animation; to adjust size and position change the height, width and viewBox parameters.

Study it to understand 🙂

You can do almost the same  with CSS3 I think, but with multiple images called, must be heavier than that…

A QRCode ‘SVG + SMIL’ based game

That’s not a new idea, someone has already given it a name: Qrcoderoulette;

the idea is to submit multiple QRCodes to the user who has to fall on the « right one » not pointing-for example- on an internet shock site, putting at risk the device scanning these codes.
But all this remained hopelessly static and require more display space on the concerned page. (Http://blogs.mcafee.com/mobile/no-winners-at-qr-code-roulette)
I do not wish here to implement this type of practice, I take the idea in order to make -at choice: a game, a joke, a piece (!)
How to reuse the concept saving space, attracting the eye and interest?
Take inkscape, SMIL attributes, an Internet browser, mix them together and you get something like this:

qrcodejeu

Note: my animation is not perfect because there is a gap between two QRCodes. Image weight: 44.8 KB

Here 2 QRCode on 3 refer to the phrase “you’ve lost”, the other pointing “www.fabkzo.com”; changing colors and animation are just there to spice up the game, this idea can be used for competitions, small gains etc etc …

Obviously we could do animation in javascript or .gif format, or anything else, I’ve chosen SMIL for its ‘natural’ implementation in most browsers (except IE of course, and it seems some browsers’ mini ‘smartphones like Opera mini), animations are part of the image and might not be blocked unless you decide not to display the picture.

In the case of these browsers that do not support SVG animations I propose converting it to video (. Ogg,. Webm,. Mp4). If you find a (simple) way to convert it to .gif just let me know.

Don’t forget to remove any way to easily determine which is the winning qrcode.

If you want to learn how to make yours, follow me there ==> Coming soon