New SVG logo, plus a Blender3D version
Finally created a new logo — actually I created it more than a month ago now... finally got around to posting the stuff I learned while doing it. It's a genuine vector embedded in my Concrete5 template. I thought it was time to move on from the JPG format. Here are a few things I learned about Illustrator, embedding SVGs in a Web site, and making 3D logos from an SVG in Blender.
But first, why would I want to move to vector graphics? A JPG is basically a list of pixels that make up an image and information about those pixels. A JPG is "bitmap" — literally a map of bits. Since its size is finite, it will look jaggy if the image is displayed at the wrong size. A vector, on the other hand, is not a finite list of pixel properties, but a list of instructions to "draw" the image, independent of size. Since a vector is redrawn every time it is loaded, it is always drawn to the specified size and not pixelated.
In a world where people can view your site on all sorts of different devices, it makes sense to make your design, including the images as versatile as possible.
1. "Joining" shapes with Adobe Illustrator.
Once I laid out my logo, I had three separate pieces. A circle, a modified "J" and a modified "K." It looked ok, since it was all colored the same, but it wasn't ok. When I exported it into blender, the overlapping areas did strange things in 3D. To properly combine the shapes at the right points, I used the direct selection tool (the white arrow), and select the point on each shape that I wanted to connect, the chose "Object > Path > Join" or +J.
Here is a simplified example. Say I want to combine these two separate L-shaped pieces.
With the two endpoints I want to connect selected, I choose +J.
Hey presto! That's it.
2. Embedding an SVG, OBJECT element v. IMG element
One problem with vectors is that some crappy old browsers (::cough IE8::) do not support them. When deciding how to embed my newly created super-spiffy logo, I ultimately decided to use an old-fashioned IMG element with an error handler, rather than OBJECT element, mostly because this page: http://tavmjong.free.fr/SVG/BUTTON_TEST/button_test.xhtml. The "onerror" event is used to run a javascript, which, in this case, replaces the SVG contents of the IMG box with a JPG.
the IMG pointing to the SVG logo contains this fallback code:
onerror="this.removeAttribute('onerror'); this.src='/themes/Playground/img/web_logo.jpg'"
3. Creating a 3D logo from an SVG in Blender 2.5
This I did for no real reason. I'm not a blender expert, so if this is not the preferred way of doing this, well, then I am infinitely sorry.
1. In Blender 2.5, choose "File > Import > Scalable Vector (.svg)" and select your logo.
2. The imported shape is a "curve." We need to change it to a "mesh" before we can extrude it. To do so, hit Alt+C and select Mesh from Curve/Meta/Surf/Text.
3. Finally, we "extrude" this shape. Enter edit mode, select every node by hitting "A." Now it "T" to make the tools pane pop up on the left side of the view. Under "Mesh Tools" select "Extrude Region." Et voila!