« Do Not Steal My SVG Semantics | Main | HTML 5, the markup »
SVG Wireframe For Your Website Design
Very often, when you are negociating a new Web site for your organization or company, the Web designer will hand over a photoshop mockup of your Web site. Personally, I have a tendency to ban this practice. I prefer to receive a solid xhtml/css mockup and sees how it is handled in different devices.
The community around SVG is building up a new Web site. They decided to use SVG for the wireframe mockup of their Web site.
Filed by Karl Dubost on November 12, 2008 10:24 AM in SVG, Tools
| Permalink
| Comments (3)
| TrackBacks (0)
Comments
About my previous comment: I found the solution to my problem. To "unflow" all text blocks (Inkscape menu Text > Unflow) will make the text appear normally in a browser. Unflowing has the effect of loosing transformations to the text, though. Better start with unflowed text in the first place I suppose.
Hi,
I did the wireframe over at the SVG IG site. I used Inkscape and FF3 and Opera for the preview.
Actually, I, too, ran into this "text does not what I want" thingy. There seem to be some inconsistencies in how Opera, FF and Inkscape handle nested definitions of the x and y attribute on texts and tspans.
However, after some experimenting and repositioning, entering and removing spare linebreaks and so on, the text was finally consistent over browsers.
And yes, neither FF3 nor Opera understand the flowing text property of Inkscape and SVG 1.2.
What I think of as very nice advantage is, that you can embed JavaScript in the SVG and can with that create a wireframe and a prototype at the same time (of course, it's not an HTML prototype, but the customer is likely to not noticing this ;-) ).
Best, Manuel
Leave a comment
Note: this blog is intended to foster polite on-topic discussions. Comments failing these requirements and spam will not get published. Please, enter your real name and email address. Every individual comment is reviewed by the W3C staff. This may take some time, thank you for your patience.
You can use the following HTML markup (a href, b, i, br/, p, strong, em, ul, ol, li, blockquote, pre) and/or Markdown syntax.
Interesting. What software did they use to make the SVG ?
I made a website using Inkscape (on Linux Ubuntu), and when I opened the original SVG in Firefox, most of the text was simply gone. The same happened when I saved it as "plain svg". So I was wondering how they did it.