ArticlesI wanted to draw a logo based on a parabolic curve.
So I fired up Photoshop, and quickly realised I couldn’t draw it by hand.
So I created a template in Excel, dragged it as a background layer into Photoshop, and tried to trace around it. I quickly realised I didn’t have the skill for that either.
I considered using the Python Imaging Library to construct the logo from first principles and primitive graphics operations. Then I discovered Scalable Vector Graphics (SVG) – a method of representing graphics primitives in an XML format, and have them be represented in your browser.
Cool! A new technology to learn, perfectly suited to my needs:
- vectors are good for logos, because they scale well.
- XML-based means I can easily modify elements (like an icon-only version, versus a version with the name, or simple colour changes to account for different backgrounds or printing processes).
- Fairly quick learning curve – I understand the principles of “turtle graphics”. I understand XML-like syntax. I can get started relatively quickly
So, I installed the Adobe SVG View plug-in to IE and set to work.
As I constructed the image, I encountered a few expected hurdles. The ARC syntax is mysterious. The Adobe SVG viewer ignores the textLength parameter.
However, overall I would say it was very successful. Perhaps the approach influenced some of my creative decisions, but I was happy with the result, and I think it would have been hard to reproduce with another technology.
For example, when I decided that the parabola did not look pleasing, I changed to a sine wave. In a raster-based world, that probably would have meant scrapping the image and starting again. Instead, I generated a new vector path in Excel, and simply copied it across.
Having the option in the future of animating the logo – declaratively! – was also a big plus.
It was when I had substantially finished the logo design that the problems occurred. I discovered I had just wandered directly right into the middle of another standards-compatibility minefield.
For example, Firefox wouldm’t display my image until I changed the namespace from the one I found on a SVG tutorial site. Even then, Firefox still paid no attention to the specified font-size. I had realised from the textLength issue earlier that some of the fancier features might not be supported in every browser… but font-size?
I didn’t care, because I was planning on converting to PNG format anyway before putting it on a web-site.
So to do the conversion, I loaded it into PhotoShop… or actually found that PhotoShop couldn’t read SVG files. Despite the fact Adobe wrote the SVG plugin, Adobe PhotoShop can’t read them! Odd!
So I searched the web for some simple converters. I found development frameworks. I found payware. I found major infrastructural installs – nothing simple and free.
I installed a demo of some payware called ABC Amber. It is a great program! It has a colourful UI, tips-of-the-day, nice installer. If I had to be picky and point out one small little problem, it would be that it doesn’t read valid SVG! I don’t even know why, because the only feedback it gives is “Failure”.
I did run my SVG through a validating engine – and got the all clear.
When I saw that ImageMagick would read SVG, I remembered the pain I had in installing that to support Animated GIFs, and almost gave up. Then I remembered that, back then, I had actually succeeded in installing the part I needed, so I launched ImageMagick’s display tool. It read the SVG file in without complaint, but cropped it severely and displayed the text in the wrong place – half off the screen.
I had to convert this image to PNG by displaying it in Internet Explorer, zooming in and taking screenshots. 🙁
Right now, I am backing away from SVG very carefully and with no sudden moves, and I am cursing the software industry under my breath for wasting yet another great opportunity to interoperate.
I am sure it is like HTML, CSS, PNG and other web-standards – No doubt there are techniques to carefully negotiate the majority of common browser bugs to produce images that look roughly the same in each browser. But this is a logo – it should be damn near identical in each browser, and I don’t have the time to spend a career on learning the tweaks required.
What do I think of the SVG standard? I think Gandhi was right: “It would be a good idea.”
Comment by Alastair on November 6, 2006
Did you try Batik?
Comment by Aristotle Pagaltzis on November 6, 2006
SVG is languishing in an odd limbo. It has gotten so bloated they needed to split out Tiny and Basic profiles. There was hope that this would help SVG own the mobile space, but being such a burden to implement indepedently, vendors seem to just be buying Flash engines instead, much like they are buying existing tagsoup-capable browsers instead of writing XHTML implementations. (XHTML was expected to own the mobile space in much the same manner, because in theory it requires fewer processing resources than dealing with HTML tagsoup.) The major corporate supporter used to be Adobe, which is not surprising, since they needed a counter for Flash, except now they own Flash. MSFT have their own proprietary XML-based formats. Meanwhile, it’s hard to combine the current generation of W3C specs; there are odd-shaped overlaps and holes between them. Embedding SVG into XHTML is unnecessarily onerous. The list of problems, both marketing and technical, goes ever on.
It would be a good idea, indeed.
I suggest you learn Postscript instead. It’s actually a programming language that’s wedded tightly to an imaging model, rather than just an image format. The language is stack-based with first-class lists, so it looks like a bastard child of Forth and Lisp. The imaging model forms the basis for SVG’s. But in contradistinction to SVG, there are myriads of existing and complete implementations of Postscript.
Comment by Julian on November 6, 2006
Alastair,
What I wanted was a simple (command-line?) conversion tool.
I did look at Batik. What I saw was:
I got scared off.
Comment by Julian on November 6, 2006
Aristotle,
Postscript? Wow, that never occurred to me. It’s been 11 years since I last
showpaged in anger.My recollection was that Postscript had the same “dead-end” problem that I am finding with SVG. Once your picture is in SVG or PostScript you can send it to the printer, or display it a single crappy browser (IE versus GhostScript) but it’s tough to simply incorporate it into a document or web-page as naturally as a JPEG.
In fairness, EPS can be read into PhotoShop – a tool I didn’t have 11 years ago.
Comment by Alastair on December 11, 2006
Rumours of SVG’s demise may be exaggerated. It’s the basis for MARS, a new XML format from Adobe that is functionally equivalent to PDF and a potential long-term replacement of it. Very interesting.
Comment by Lurker on October 4, 2007
I was having similar issues and also found it odd that Photoshop could not open this format. I’m running away from svg. Thanks for the warning.
Comment by Bill G on October 29, 2007
Get a copy of “Inkscape” and you will be able to export .png bitmaps as well create the logo in the first place. Not a command line tool, but very similar to MS Visio but with gradient shading (good for logos?). In addition, Viso does a very good job of importing the .svg files from inkscape – just in case you want to go there.
This program wants to run on Linux, but binaries for MS Windows are available.
Comment by Em on January 16, 2008
Seconds to the Inkscape suggestion. I’ve been using it for a few weeks now, and am really enjoying it. It’s a very nice vector drawing program based on svg and has some nice features included. Think a simpler (+free!) version of adobe illustrator. Plus, it painlessly exports bitmaps and includes a nice little editor if you happen to want to hand edit the xml.
Comment by Matt on May 29, 2008
SVG is a vector image, Photoshop is a raster editor. Illustrator is a vector editor. Easy as that, try and open an emf, wmf, etc. with photoshop, won’t work either. Raster formats only.
Comment by Julian on May 29, 2008
Matt,
Yes, SVG is vector format.
Yes, Photoshop is largely a raster editor, but with some vector features (e.g. paths).
No, it isn’t as easy as that. Photoshop will import PICT, Encapsulated PostScript and PDF files, each of which (according my understanding) has at least some vector elements.
I don’t think it is unreasonable for PostScript to have a SVG engine to render them as raster images for further editing, given Adobe is pushing both products.
Comment by wentzr on February 2, 2010
wholeheartedly agree.. it’s beyond asinine that Adobe Photoshop CS4 (or any version for that matter) is unable to import SVG files, period.
Once again…. open source software holds the answer – install gimp for osx. (or linux if you haven’t already thrown your apple and microsoft OSs off a cliff for reasons such as this) it’s free and capable of handling SVG files. shocker.
Time and time again, the overpriced is proven inept. go open source. it doesn’t make sense to do otherwise unless you enjoy being throttled back by overpriced overbloated BS software packages that do nothing but add support for hardware you didn’t want anyway but were forced to buy in order to run the new version.