![](https://secure.gravatar.com/avatar/5f414311eb1c371b119c9bf50d104b69.jpg?s=120&d=mm&r=g)
Hi,
I just finished my first web design http://home.arcor.de/ccyrny/ in Inkscape that incorporates SVG. The only problem: IE 6 doesn't support it, and I'm not sure about IE 7 (I am using Linux/Firefox).
My question: Does it make sense to keep the SVG (since the web site is for clients)? I really love the look, but I'm especially very disappointed with IE (basically the old story). I would be glad if someone could give me some feedback on how my page looks (so far, only the entrance page to my site) in their browser. I would also appreciate feedback/experience by other members on the list on the use of SVG for web sites.
TIA,
Claus
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Claus Cyrny wrote the following on 1/11/2008 8:08 AM:
Hi,
I just finished my first web design http://home.arcor.de/ccyrny/ in Inkscape that incorporates SVG. The only problem: IE 6 doesn't support it, and I'm not sure about IE 7 (I am using Linux/Firefox).
My question: Does it make sense to keep the SVG (since the web site is for clients)? I really love the look, but I'm especially very disappointed with IE (basically the old story). I would be glad if someone could give me some feedback on how my page looks (so far, only the entrance page to my site) in their browser. I would also appreciate feedback/experience by other members on the list on the use of SVG for web sites.
TIA,
Claus
Personally, I think it's more important that a website works. Have you considered exporting your images to pngs until svg becomes a little more supported? I think your website looks pretty good, though.
heathenx
![](https://secure.gravatar.com/avatar/453bd3fdf92008e619046e0eb31c33ad.jpg?s=120&d=mm&r=g)
Claus Cyrny wrote:
I just finished my first web design http://home.arcor.de/ccyrny/ in Inkscape that incorporates SVG. The only problem: IE 6 doesn't support it, and I'm not sure about IE 7 (I am using Linux/Firefox).
That is *far* from your only problem. I did my own test [1] some months ago and I discovered that search engines will not index your SVG, will not look at the text inside the SVG and will not follow the links. My test site receives *a lot* of visits form all the major spiders (google, yahoo, msn, baidu) but they just look at the root and do not index it.
I am disappointed by this, as Inkscape could be used to create some wonderful websites.
My question: Does it make sense to keep the SVG (since the web site is for clients)? I really love the look, but I'm especially very disappointed with IE (basically the old story). I would be glad if someone
I think IE support is not the ugliest part of the problem, but search engines (at least for me, I do not care about the visitors with IE on my *personal* website, I'm happy with it as logn is standard compliant, viewable with Firefox and indexed).
could give me some feedback on how my page looks (so far, only the entrance page to my site) in their browser. I would also appreciate feedback/experience
It look fine here with a beta of Firefox 3 on Linux, but I suspect you already know that.
by other members on the list on the use of SVG for web sites.
This is the classic chicken-and-egg problem, if there are not enough sites made with SVG, browsers and search engines will not support SVG and if search engines and browsers do not support SVG, the designers will not make such sites. If we would find a way to put pressure on Google to start indexing SVG then half of the problem would be solved (and the second half maybe with a 3-rd party plugin for IE).
[1] - http://nicubunu.blogspot.com/2007/06/authoring-svg-websites-with-inkscape.ht...
![](https://secure.gravatar.com/avatar/49dcd7352fa6d4c8f9aac7d21aa025f3.jpg?s=120&d=mm&r=g)
Claus Cyrny wrote:
Hi,
I just finished my first web design http://home.arcor.de/ccyrny/ in Inkscape that incorporates SVG. The only problem: IE 6 doesn't support it, and I'm not sure about IE 7 (I am using Linux/Firefox).
My question: Does it make sense to keep the SVG (since the web site is for clients)? I really love the look, but I'm especially very disappointed with IE (basically the old story). I would be glad if someone could give me some feedback on how my page looks (so far, only the entrance page to my site) in their browser. I would also appreciate feedback/experience by other members on the list on the use of SVG for web sites.
Your web is pretty cool but it has problems. See attached. You must test your site with different sized fonts.
Microsoft is notorious for not supporting any file formats but its own. For the longest time it did not support PNG. And then it wonders why nobody wants to support its formats.
The problem I have is that my ISP does not support SVG. When you try to download a SVG file, it says its MIME type is text/plain, not text/svg. Check out http://www.magma.ca/~shawnhcorey/200710/circulatory.svg To view it, you have to save it on your machine and open the file.
Sigh.
I recommend that you convert your images to PNG or JPEG. It will be a long time before everyone supports the established standards.
![](https://secure.gravatar.com/avatar/453bd3fdf92008e619046e0eb31c33ad.jpg?s=120&d=mm&r=g)
Mr. Shawn H. Corey wrote:
Your web is pretty cool but it has problems. See attached. You must test your site with different sized fonts.
That is the screenshot of a HTML page, beyond the SVG the original poster asked about.
The problem I have is that my ISP does not support SVG. When you try to download a SVG file, it says its MIME type is text/plain, not text/svg. Check out http://www.magma.ca/~shawnhcorey/200710/circulatory.svg To view it, you have to save it on your machine and open the file.
Your hosting provider has a badly configured web server (wrong MIME type), this in entirely his fault and you should complain to them or switch to a decent hoster.
Sigh.
I recommend that you convert your images to PNG or JPEG. It will be a long time before everyone supports the established standards.
This is a self-defeating attitude, we should do something (the easiest is to make some cool websites and a lot of noise about them) in order to get the various parties to support SVG. And don't wait for "everyone". If Google would index SVG I would publish *right now* some pages as SVG.
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Nicu Buculei wrote the following on 1/11/2008 10:52 AM:
Mr. Shawn H. Corey wrote:
Your web is pretty cool but it has problems. See attached. You must test your site with different sized fonts.
That is the screenshot of a HTML page, beyond the SVG the original poster asked about.
The problem I have is that my ISP does not support SVG. When you try to download a SVG file, it says its MIME type is text/plain, not text/svg. Check out http://www.magma.ca/~shawnhcorey/200710/circulatory.svg To view it, you have to save it on your machine and open the file.
Your hosting provider has a badly configured web server (wrong MIME type), this in entirely his fault and you should complain to them or switch to a decent hoster.
Sigh.
I recommend that you convert your images to PNG or JPEG. It will be a long time before everyone supports the established standards.
This is a self-defeating attitude, we should do something (the easiest is to make some cool websites and a lot of noise about them) in order to get the various parties to support SVG. And don't wait for "everyone". If Google would index SVG I would publish *right now* some pages as SVG.
Ok, how about helping some noobs out (me) then. What is the best way to get started with SVG web graphics (svg and html). I think that I would like to make a mockup for myself to better understand things. I already know how to make a layout and add links. Do we simple just call in the svg file as an object (for the quick-n-dirty)?
heathenx
![](https://secure.gravatar.com/avatar/453bd3fdf92008e619046e0eb31c33ad.jpg?s=120&d=mm&r=g)
heathenx wrote:
Ok, how about helping some noobs out (me) then. What is the best way to get started with SVG web graphics (svg and html). I think that I would like to make a mockup for myself to better understand things. I already know how to make a layout and add links. Do we simple just call in the svg file as an object (for the quick-n-dirty)?
What I aiming for is: configure Apache to serve index.svg and the directory index and that is all (add index.svg to the DirectoryIndex directive). When the user access your site the browser will open your SVG and everybody is happy.
To use SVG as graphics in an HTML file you have two ways: - use inline SVG, there your HTML is XHTML with SVG inlined inside the HTML code: http://wiki.svg.org/Inline_SVG - embed the SVG as abjects: http://wiki.svg.org/SVG_and_HTML
On the Firefox roadmap is the ability to use SVG with the IMG tag, but I believe it will not be ready for FF 3.
But the real deal (IMO) is to author the website completely as SVG, saving directly from Inkscape (but here we get to the problems pointed at the start of this thread).
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Nicu Buculei wrote the following on 1/11/2008 12:51 PM:
heathenx wrote:
Ok, how about helping some noobs out (me) then. What is the best way to get started with SVG web graphics (svg and html). I think that I would like to make a mockup for myself to better understand things. I already know how to make a layout and add links. Do we simple just call in the svg file as an object (for the quick-n-dirty)?
What I aiming for is: configure Apache to serve index.svg and the directory index and that is all (add index.svg to the DirectoryIndex directive). When the user access your site the browser will open your SVG and everybody is happy.
To use SVG as graphics in an HTML file you have two ways:
- use inline SVG, there your HTML is XHTML with SVG inlined inside the
HTML code: http://wiki.svg.org/Inline_SVG
- embed the SVG as abjects: http://wiki.svg.org/SVG_and_HTML
On the Firefox roadmap is the ability to use SVG with the IMG tag, but I believe it will not be ready for FF 3.
But the real deal (IMO) is to author the website completely as SVG, saving directly from Inkscape (but here we get to the problems pointed at the start of this thread).
Alright. Thanks Nicu. That should get me down the road a ways.
Since I don't have the beta Firefox installed (still on 2.0+) I have been using Opera 9.5+ in its place. Svg graphics look a little squirrely in the browser so far but all I intend to build is a proof of concept at this point. From there I can build on my experiences.
heathenx
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
heathenx wrote:
Ok, how about helping some noobs out (me) then. What is the best way to get started with SVG web graphics (svg and html). I think that I would like to make a mockup for myself to better understand things. I already know how to make a layout and add links. Do we simple just call in the svg file as an object (for the quick-n-dirty)?
heathenx
Hi heatenx!
I tried an SVG-only site at FAR, http://far.no/svg/web.svg , which is viewable and navigable in Firefox 2.x on all platforms - just click the menu items. I used only Inkscape and the built in XML editor to create the links. See an earlier post with the subject "Draw a web site using only Inkscape" from May 31 2007 by me and the following thread in the archives. In short, I want to find out if Inkscape can be used to draw scalable, XML based and thus programmable, colourful and attractive user interfaces, and the short answer is YES.
Unfortunately, there are several technical problems that needs to be addressed, and I haven't had the time to investigate which problems are between the chair and the keyboard, in Inkscape or in Firefox and other browsers. Here are the once I've found so far with some help from a friend:
1. Fonts to paths == none-text, thus not indexable or searchable in a browser, and well ... not fonts. I asked Opera's Håkon Wium Lie the following question over at "A list apart":
http://www.alistapart.com/comments/cssatten?page=5#46
"...the idea is to require the user to have ANY UTF-8 font available on their system and let CSS tell the brower's SVG-renderer to draw a font that looks like Times, Helvetica or whatever. If this is possible, the user only needs ONE font installed and browsers styles it into whatever the designer wants it to look like. If the browser has seen this styling before it could cache it to render faster the next time round. Is this a horrible idea?"
and his answer at
http://www.alistapart.com/comments/cssatten?page=7#62
"Interesting idea, but I think it takes styling one bridge too far. I doubt you will be able to generate, e.g., Larabies’s fonts from one normalized font and some styling info. Further, I think the systems’s font renderer should be used for rendering fonts; it tends to do a better job by, e.g., honoring hinting information in the font files."
I'm not able to judge the answer, but I know I don't like it, mostly because Inkscape is capable of beautiful SVG artwork that far surpasses the primitive hinting information in font files. In short, it doesn't make sense, although it can be technically correct at present. If it could be done, those nice fonts at my example site would render properly, and turning them into paths would not be necessary.
2. Paths as links. Enclosed paths needs bounding area to become useful links.
Given that fonts must be turned into paths to look like they ought to, you will notice that using the XML editor to link directly to the path gives the user only the path itself as a very thin clickable area. The enclosed area of the letter 'O' does not become clickable, only the circumference. If it is possible to create a bounding area as a CSS-style around a path and then make the path clickable, the presence of the styled bounding area could be a hint to browsers on how large the clickable area should be. Inkscape would then need some easy way to set such a bounding area.
I side-stepped the problem by placing transparent boxes above the paths, and then attaching the links to these boxes. I don't like this - the correct object should have the link or links attached to it, if not it will be very difficult for search engines to automatically traverse and semantically understand links, and the file becomes larger with more objects.
3. Honouring Z-order.
Try hovering your mouse above the News link at my SVG-site. You will notice that I wrote "transparent boxes above the paths", but something is wrong - the paths visible through the transparent box turns off the link. Thanks to André for this one! :-)
4. Text is not treated as text by Firefox, which means you cannot search and more seriously - you cannot select and copy (being mindful of copyright or copyleft).
This renders an SVG-only site pretty, but mostly useless in my opinion.
Comments and preferably fixes are welcome! :-)
Cheers, Haakon
![](https://secure.gravatar.com/avatar/5f414311eb1c371b119c9bf50d104b69.jpg?s=120&d=mm&r=g)
Hi,
many thanks to all who responded to my post.
Since this is basically for clients, I am (albeit reluctantly) going to convert the graphics to PNGs (which poses another problem for IE, which does not support alpha channels in PNGs, at least IE 6 doesn't).
I converted the font inside the SVG to paths, to avoid problems with the rendering, since this is an uncommon font. I tried to attach links to the text, but removed them, since the links were not indicated (cursor to hand) over the entire area where the text is visible.
Bottom line (for me):
I want to encourage everyone to start using SVGs for web design (wherever feasible), since this opens up so many new possibilities. And regarding the problem of text not being recognized by search engines, I thought about separating the design elements( = SVG) from the content (= text) by putting the text on another layer. In addition, <link rel= ... comes to my mind as /one /means to provide search engines with links they can follow.
Greetings,
Claus
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Claus Cyrny wrote the following on 1/11/2008 2:31 PM:
Hi,
many thanks to all who responded to my post.
Since this is basically for clients, I am (albeit reluctantly) going to convert the graphics to PNGs (which poses another problem for IE, which does not support alpha channels in PNGs, at least IE 6 doesn't).
I converted the font inside the SVG to paths, to avoid problems with the rendering, since this is an uncommon font. I tried to attach links to the text, but removed them, since the links were not indicated (cursor to hand) over the entire area where the text is visible.
Bottom line (for me):
I want to encourage everyone to start using SVGs for web design (wherever feasible), since this opens up so many new possibilities. And regarding the problem of text not being recognized by search engines, I thought about separating the design elements( = SVG) from the content (= text) by putting the text on another layer. In addition, <link rel= ... comes to my mind as /one /means to provide search engines with links they can follow.
Greetings,
Claus
Yup. Thanks for the nudge, Claus. Definitely got me interested. :)
heathenx
![](https://secure.gravatar.com/avatar/05060249fa105ead60232549adfbe083.jpg?s=120&d=mm&r=g)
On 1/11/08, Claus Cyrny <claus.cyrny@...22...> wrote:
I want to encourage everyone to start using SVGs for web design (wherever feasible),
I use Inkscape for almost all of my web-design graphics work these days, but export to png instead of using the actual SVG.
I keep Inkscape open along with my HTML editor, and export to PNG as needed. I keep one large 'working palette' file in Inkscape per project, and take advantage of Inkscape's limitless canvas to spread things out and try new ideas with copies of other graphics.
I really like this 'scratchpad' way of working, it makes things so much easier than a GIMP/Photoshop one-image-per-file way of doing things.
All of the graphics on several of my newest sites have been done entirely in Inkscape this way - blog.wirelizard.ca & www.wirelizard.ca both have big Inkscape scratchpad files.
It's not getting SVG out onto the web, granted, but Inkscape is incredibly useful even now, with SVG not well supported on the mainstream 'net.
Brian wirelizard.ca
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
Brian Burger skrev:
On 1/11/08, Claus Cyrny <claus.cyrny@...22...> wrote:
I want to encourage everyone to start using SVGs for web design (wherever feasible),
I keep Inkscape open along with my HTML editor, and export to PNG as needed. I keep one large 'working palette' file in Inkscape per project, and take advantage of Inkscape's limitless canvas to spread things out and try new ideas with copies of other graphics.
I really like this 'scratchpad' way of working, it makes things so much easier than a GIMP/Photoshop one-image-per-file way of doing things.
Thanks for this tip, Brian!
I've really enjoyed looking at the sites mentioned in this thread so far, and want to encourage interested Inkscape designers to create a new "SVG technology preview"-button on their web sites, and then put up linked SVG-files. For the unfortunate - I'm talking about our IE7 friends here - you will need to advise them about Adobe's SVG viewer at http://www.adobe.com/svg/viewer/install/mainframed.html . In 1995-96 and later we learned by viewing source and we tried all sorts of wacky plugins, eventually a little something from a company called Macromedia Flash. Many sites back then had a litter of buttons for plugins needed for different parts of a single web page. If we make it, people will try. :-)
Cheers, Haakon
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Haakon Meland Eriksen wrote the following on 01/11/2008 08:03 PM:
Brian Burger skrev:
On 1/11/08, Claus Cyrny <claus.cyrny@...22...> wrote:
I want to encourage everyone to start using SVGs for web design (wherever feasible),
I keep Inkscape open along with my HTML editor, and export to PNG as needed. I keep one large 'working palette' file in Inkscape per project, and take advantage of Inkscape's limitless canvas to spread things out and try new ideas with copies of other graphics.
I really like this 'scratchpad' way of working, it makes things so much easier than a GIMP/Photoshop one-image-per-file way of doing things.
Thanks for this tip, Brian!
I've really enjoyed looking at the sites mentioned in this thread so far, and want to encourage interested Inkscape designers to create a new "SVG technology preview"-button on their web sites, and then put up linked SVG-files. For the unfortunate - I'm talking about our IE7 friends here - you will need to advise them about Adobe's SVG viewer at http://www.adobe.com/svg/viewer/install/mainframed.html . In 1995-96 and later we learned by viewing source and we tried all sorts of wacky plugins, eventually a little something from a company called Macromedia Flash. Many sites back then had a litter of buttons for plugins needed for different parts of a single web page. If we make it, people will try. :-)
Cheers, Haakon
If I have time I will put together my first SVG web site this weekend. Of course, it will be just a "preview" site. I am more interested in how I can tailor it with CSS. Got some things to learn in the next few days. Oh boy...
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
heathenx
![](https://secure.gravatar.com/avatar/05060249fa105ead60232549adfbe083.jpg?s=120&d=mm&r=g)
On 1/11/08, heathenx <heathenx@...155...> wrote:
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
Just to kick things off, a pair of quickie "SVG Tech Preview/Use SVG" ideas. (have I mentioned that I love Inkscape for rapid prototyping/'sketching' of artwork?) http://dev.wirelizard.ca/Use_SVG.svg
Note that neither Opera nor Firefox get the text display right. The two fonts are URW Chancery L & Bitstream Vera Sans, both of which are available by default in Ubuntu (and other Linux distros, I understand) & Free-licensed, so they're installable anywhere... I prefer the grey one on the left, but YMMV.
I've released that SVG to the Public Domain, so go nuts and do whatever you like with it.
I've also put a screenshot of one of my working 'scratchpad' files up - there's lots of embedded images, so putting the SVG up isn't practical. Should give people an idea of what I mean by 'scratchpad' work, though: http://dev.wirelizard.ca/blog_scratchpad.png
The airplane image is actually a huge SVG in it's own right; the red block is a size reference, to make sure I'm producing an image that'll actually fit where it needs to go...
Brian wirelizard.ca
![](https://secure.gravatar.com/avatar/5f414311eb1c371b119c9bf50d104b69.jpg?s=120&d=mm&r=g)
Brian Burger wrote:
On 1/11/08, heathenx <heathenx@...155...> wrote:
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
Just to kick things off, a pair of quickie "SVG Tech Preview/Use SVG" ideas. (have I mentioned that I love Inkscape for rapid prototyping/'sketching' of artwork?) http://dev.wirelizard.ca/Use_SVG.svg
I made another button http://home.arcor.de/ccyrny/downloads/svg_button_2x.png (large & scaled-down; just a rough sketch). Software: Inkscape & The Gimp. If anyone likes it, I can improve it somewhat.
Claus
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
Brian Burger skrev:
On 1/11/08, heathenx <heathenx@...155...> wrote:
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
Just to kick things off, a pair of quickie "SVG Tech Preview/Use SVG" ideas. (have I mentioned that I love Inkscape for rapid prototyping/'sketching' of artwork?) http://dev.wirelizard.ca/Use_SVG.svg
Thanks, Brian - I like these! I'll try them not to far away at http://far.no/ this weekend. :-)
Cheers, Haakon
![](https://secure.gravatar.com/avatar/d7d79835b82d81434161f5f62be9105e.jpg?s=120&d=mm&r=g)
Haakon Meland Eriksen wrote the following on 01/18/2008 03:02 PM:
Brian Burger skrev:
On 1/11/08, heathenx <heathenx@...155...> wrote:
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
Just to kick things off, a pair of quickie "SVG Tech Preview/Use SVG" ideas. (have I mentioned that I love Inkscape for rapid prototyping/'sketching' of artwork?) http://dev.wirelizard.ca/Use_SVG.svg
Thanks, Brian - I like these! I'll try them not to far away at http://far.no/ this weekend. :-)
Cheers, Haakon
Those are nice. I like the orange one the best.
Here's my take. I went for simple and a little Vista-ish.
http://misc.heathenx.org/Use_SVG_01.svg
heathenx
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
Haakon Meland Eriksen wrote:
Brian Burger skrev:
On 1/11/08, heathenx <heathenx@...155...> wrote:
If someone wants to design a "SVG technology preview"-button then I'll be glad to include it. I wouldn't mind having the Inkscape logo on it to promote the software too. Hint...
Just to kick things off, a pair of quickie "SVG Tech Preview/Use SVG" ideas. (have I mentioned that I love Inkscape for rapid prototyping/'sketching' of artwork?) http://dev.wirelizard.ca/Use_SVG.svg
Thanks, Brian - I like these! I'll try them not to far away at http://far.no/ this weekend. :-)
I didn't get time to fix my site with the new Use SVG-logo, but now it there, so thanks again, Brian! If you click the logo, you go to http://far.no/svg/web.svg
Cheers, Haakon
![](https://secure.gravatar.com/avatar/5f414311eb1c371b119c9bf50d104b69.jpg?s=120&d=mm&r=g)
Brian Burger wrote:
On 1/11/08, Claus Cyrny <claus.cyrny@...22...> wrote:
I want to encourage everyone to start using SVGs for web design (wherever feasible),
I use Inkscape for almost all of my web-design graphics work these days, but export to png instead of using the actual SVG.
[... ]
It's not getting SVG out onto the web, granted, but Inkscape is incredibly useful even now, with SVG not well supported on the mainstream 'net.
I agree wholeheartedly! About last week, I stumbled upon a web site template done in Photoshop (with different layers), but Inkscape is really so much easier! It is basically my favorite graphics program, because it is so incredibly easy/intuitive to use. The handling of the splines alone is really great!
Greetings,
Claus
![](https://secure.gravatar.com/avatar/453bd3fdf92008e619046e0eb31c33ad.jpg?s=120&d=mm&r=g)
Haakon Meland Eriksen wrote:
Unfortunately, there are several technical problems that needs to be addressed, and I haven't had the time to investigate which problems are between the chair and the keyboard, in Inkscape or in Firefox and other browsers. Here are the once I've found so far with some help from a friend:
- Fonts to paths == none-text, thus not indexable or searchable in a
browser, and well ... not fonts. I asked Opera's Håkon Wium Lie the following question over at "A list apart":
I think this is a NO-NO. The text should stay as text and not be converted to path, eventually the search engine will support and index it (and on top of that, converting a lot of text to paths will make the file size huge).
I imagine the following solution: use fonts with the same metrics and a fall-back mechanism, like the following CSS I use for my HTML: font-family: "Liberation Sans", Arial, sans-serif ;
Liberation Sans is a free font with the same metrics as Arial (it also has a Serif and Monospaced variants) which I expect to be installed by default in a Linux distro (my primary target), and if it is not available, Arial is used (Windows). It may be the other way, with Arial first and Liberation as fallback.
Of course, this will limit your font use to Arial, Times New Roman and Courier New, but the same is true if you want to tightly control the look on HTML or whatever else where you can't embed the fonts (BTW, you *can* embed fonts in SVG).
- Honouring Z-order.
This is a bug in the browser and should be fixed by the browser.
- Text is not treated as text by Firefox, which means you cannot search
and more seriously - you cannot select and copy (being mindful of copyright or copyleft).
Yeah, the search does not work, but I believe the feature will be added to Firefox once it will be needed enough. As for select and copy, sure, it would be nice to have, but license-wise for the time being, the workaround of looking at the source and copying from there is not that bad.
This renders an SVG-only site pretty, but mostly useless in my opinion.
For now, sadly this is true, I agree.
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
Nicu Buculei wrote:
Haakon Meland Eriksen wrote: 1. Fonts to paths == none-text, thus not indexable or searchable in a > browser, and well ... not fonts. I think this is a NO-NO. The text should stay as text and not be converted to path, eventually the search engine will support and index it (and on top of that, converting a lot of text to paths will make the file size huge).
I agree. If you take a look at my example site at http://far.no/svg/, you will notice that only titles and menu items are paths. This is an artistic choice. I find those fonts fun and in tune with the vivid colours and childlike simplicity of the rest of page and Inkscape itself. I think you will agree your solution is technically correct, but not artistically correct. I have done what you recommended in the past, but I find it uninteresting and backwards, and I will not endure it any longer. Typefaces are drawings and should be treated as part of the overall composition, not as "just text". Imagine Leonardo painting "Mona Lisa" today using SVG, and then the engineers came and told him: "Listen, you really can't have this Mona object in there. It's not standard. It's the smile, you see. It's not supported on most operating systems, so we suggest a fall back solution with a cow, and if that's not supported then a piece of lettuce." I doubt embedding fonts is the way to go, if it was, why isn't it used?
- Honouring Z-order.
This is a bug in the browser and should be fixed by the browser.
Ah, good. Another problem is browser zooming with CTRL and + or CTRL and -. If you try this with Firefox 2.x, you will notice that only the text become bigger or smaller, not the rest of the SVG design.
- Text is not treated as text by Firefox, which means you cannot search > and more seriously - you cannot select and copy (being mindful of > copyright or copyleft).
Yeah, the search does not work, but I believe the feature will be added to Firefox once it will be needed enough.As for select and copy, sure, it would be nice to have, but license-wise for the time being, the workaround of looking at the source and copying from there is not that bad.
You and I know this workaround is possible, but we are the minority. The majority report will be quite different: this sucks.
Cheers, Haakon
![](https://secure.gravatar.com/avatar/453bd3fdf92008e619046e0eb31c33ad.jpg?s=120&d=mm&r=g)
Haakon Meland Eriksen wrote:
I doubt embedding fonts is the way to go, if it was, why isn't it used?
There are really only 3 solutions: - destroy the text and serve make it paths but it will not be searchable and selectable anymore; - expect the user to have *all* the fonts installed on his system (not a chance in hell); - serve the font along with the page, either embedded or linked (large download size and problems with font distribution license). It seems no one of those is good enough.
Embedding fonts is not used because 1. Inkscape and other editors don't provide a nice GUI for it and 2. it will increase the file size (I believe embedded files are base64 encoded). And don't forget the font licenses.
Ah, good. Another problem is browser zooming with CTRL and + or CTRL and -. If you try this with Firefox 2.x, you will notice that only the text become bigger or smaller, not the rest of the SVG design.
Firefox 3 is close to release and it does full page zoom.
- Text is not treated as text by Firefox, which means you cannot search > and more seriously - you cannot select and copy (being mindful of > copyright or copyleft).
Yeah, the search does not work, but I believe the feature will be added to Firefox once it will be needed enough.As for select and copy, sure, it would be nice to have, but license-wise for the time being, the workaround of looking at the source and copying from there is not that bad.
You and I know this workaround is possible, but we are the minority. The majority report will be quite different: this sucks.
Chicken and egg: browsers will improve at a slow page until there are no pages made with SVG and we will not create SVG websites until the browsers are good enough. We can wait until the browsers improve (and hope the development will not be derailed by other priorities) or push SVG websites and force them to improve.
![](https://secure.gravatar.com/avatar/9d1c84034dc12c2bcf3c4a351b065b0a.jpg?s=120&d=mm&r=g)
I totally agree with Nicu.
You inkscape users (and others of course) should start serving SVG on your webpages. Browser makers complain that there is no SVG content out there. I am sure they will more quickly develop their SVG support, once there is more SVG content out there. Wikipedia is a good example. They store their files in SVG format, but server PNG per default. They should enable SVG per default and just server PNG as a fallback. At least one third of the browsers out there can display SVG: Opera, Safari, Firefox. None of them is perfect, but more SVG content would definitely challenge them to complete their support.
BTW: the Webkit people just added SVG fonts support to the developers version of Webkit/Safari. So, after Opera, the Adobe viewer and Batik, Safari will be the next browser implementing SVG fonts.
So, please start using SVG on the web, and direct users to good browsers, such as Opera, Safari, Firefox 3, instead of just waiting for them to complete their SVG support.
Andreas
Chicken and egg: browsers will improve at a slow page until there are no pages made with SVG and we will not create SVG websites until the browsers are good enough. We can wait until the browsers improve (and hope the development will not be derailed by other priorities) or push SVG websites and force them to improve.
-- nicu :: http://nicubunu.ro :: http://nicubunu.blogspot.com Open Clip Art Library: http://www.openclipart.org my cool Fedora wallpapers: http://fedora.nicubunu.ro/wallpapers/ my clipart collection: http://clipart.nicubunu.ro/
Check out the new SourceForge.net Marketplace. It's the best place to buy or sell services for just about anything Open Source. http://ad.doubleclick.net/clk;164216239;13503038;w?http://sf.net/marketplace _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
![](https://secure.gravatar.com/avatar/524ccb8734dff3d9a8da0f4f3a3851a1.jpg?s=120&d=mm&r=g)
Nicu Buculei wrote:
Haakon Meland Eriksen wrote:
I doubt embedding fonts is the way to go, if it was, why isn't it used?
There are really only 3 solutions I know, I want a fourth. :)
Firefox 3 is close to release and it does full page zoom.
Thanks, great news!
- Text is not treated as text by Firefox, which means you cannot search > and more seriously - you cannot select and copy (being mindful of > copyright or copyleft).
Yeah, the search does not work, but I believe the feature will be added to Firefox once it will be needed enough.As for select and copy, sure, it would be nice to have, but license-wise for the time being, the workaround of looking at the source and copying from there is not that bad.
You and I know this workaround is possible, but we are the minority. The majority report will be quite different: this sucks.
Chicken and egg: browsers will improve at a slow page until there are no pages made with SVG and we will not create SVG websites until the browsers are good enough. We can wait until the browsers improve (and hope the development will not be derailed by other priorities) or push SVG websites and force them to improve.
I wonder if that is really true. I choose option number three - short term value, proprietary secrets and time to market was more important ten years ago than open standards and long term solutions like SVG are today.
participants (7)
-
Andreas Neumann
-
Brian Burger
-
Claus Cyrny
-
Haakon Meland Eriksen
-
heathenx
-
Mr. Shawn H. Corey
-
Nicu Buculei