Log in

No account? Create an account

Previous Entry | Next Entry

Inkscape vector image editor

Today while I was watching TV, I was learning a new - well, new to me - freeware vector editing program, Inkscape.   It creates SVG images, which are just about starting to be a useable,supported graphic format for web pages.     At the moment, graphics on web pages are mostly png, jpg and gif format.  All of these are bitmap formats - ie, the code behind them specifies the colour of each pixel, or each line of pixels.  

Vector images work differently : you specify points along a line, or the behaviour of a shape, which means that you can create an image, then easily move the line, or the shape about, without completely changing all of the image.  Because of this ability to adjust the position and shapes of objects easily, SVG could also eventually be a partial replacement for Flash for animation, and it's also, apparently,  ideal for high resolution 'retina' displays, because the images can easily scale neatly to different sizes and look good at different resolutions.   This is very nifty indeed.  

Although the software does have some rough patches and loose ends for some of the tasks I tried,  I still think it is great.  I've even got out my old graphics tablet to play with it.   It's a lot of fun and you can make some really interesting effects quite quickly. 

This is what I made, - a clickable map for the Oldies Club website with mouseover areas -  although LJ doesn't seem to know how to embed an svg image (yet?) so you need to click through to view it rather than seeing it within the page like a normal web graphic.  If I actually make some art with Inkscape, I may export to another format if I decide to show it to LJ (embedding works if you have access to the html code where you are embedding, which normally I do).  Next time I'm going to try a picture rather than an interactive shape. 

It took me *ages* to do, due to not knowing where the options were for things and having to look them up, but I suppose that's learning curves for you.  In theory, too,  you are supposed to be able to do mouseover effects in Inkscape.  In practice, I found it impossible to make the suggested CSS amends work properly,  or get the built in javascript tools to work consistently -  they worked for the first mouseover I added, but not the others, for some mysterious reason.  I ended up editing the code of my almost-completed SVG file in a text editor to control the mouseover effects accurately.  I had to add these lines to my Wales object, for example: 

    <a id="a14155"
       onmouseover="evt.target.setAttribute('opacity', '0.0');"
       onmouseout="evt.target.setAttribute('opacity', '1.0');"

As suggested in this tutorial.  This was not a fun part of the process and I can't imagine someone who isn't comfortable with code going through it, but perhaps now even IE supports svg images, new tools for working with them will appear soon?   I wish I had the expertise to help develop them, but that's definitely outside my skills.  

I do like that you *can* dive in and edit the code with a text editor, but not having to do so would be shiny.  Of course, you can do the same thing with an image map and image slicing, but sliced images are a PITA to edit or resize, and it's quite neat that all the code - the positioning and colouring of objects, the links, the mouseovers - are all in one file, rather than half of it being in an HTML web page, and half of it in an image file, which is a bit messy. 

One thing that caught me out is the specifying of opacity. Once I'd specified that an image should be say 30% opaque (ie, mostly translucent) that becomes the default colour for that item, and saved,  it seemed to be difficult to get the item to go back to 100% colour.  Adjusting the slider let me adjust things between 30% and 0% opaque, but not make the object 100% opaque again.   I only managed this by removing the opacity setting by manually editing the textfile, which surely can't be right. I will have to research this further. 

Latest Month

April 2018


Powered by LiveJournal.com
Designed by Lilia Ahner