Best way to present SVG in HTML

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
SxN
Posts: 1
Joined: Mon Apr 11, 2011 1:22 pm

Best way to present SVG in HTML

Postby SxN » Mon Apr 11, 2011 2:12 pm

(Big sigh...)

Hi All,

I don't know if I'm posting my cry for help in the right forum; if not, I apologize.

I have a project which I'd like to promote to potential clients. The project's name serve also as a logo, and am referring it a lot in the text. To increase the appeal, in the text I am using the logo (a little .png file) wherever a reference is needed.

I created an .svg version of the logo, and would like to use it instead of .png.

Here are the following problems for which I'm not sure what's the best answer:
1. Various web tutorials suggest that the best way to introduce an SVG file is using the <embed> element. They're also all quick to point that it is non-standard, and that <object> should have been the preferred method, but this one has bugs and is not implemented by everyone. So, having this in mind, I was thinking at something like:

Code: Select all

<object data="uC.svg" width="300" height="50" type="image/svg+xml">
<embed src="uC.svg" width="300" height="50" type="image/svg+xml">
<img style="vertical-align:middle" src="uc.png" border=0 alt="uniQ/Card">
</object>


Notice that I don't have things like "codebase" as, according to Adobe, most modern browsers have native SVG support and their viewer is not necessary anymore.

So, first I try using <object>. If that is not supported by browser, I try <embed>. If that one fails too, I fall back on <img>. I'm (ab)using the fact that browsers will ignore unknown tags.

The problem with this approach is that it's a lot of code that will repeat again and again. So, (if the above is correct), is there a way to declare this construction somehow in the <head> section and then just invoke it when necessary?

2. In order to minimize traffic, I'd like to go one step further: load it once in cache, and re-use it for subsequent web pages from my site. Is it possible, and how?

3. The logo is actually just some contorted text, with some colour attributes. I'd like it to follow the re-sizing of surrounding (standard) text, and as SVG is "Scalable VG" I think it should be possible. How?

Thanks for your advise,
SxN
Top
User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:
Contact brynn

Re: Best way to present SVG in HTML

Postby brynn » Mon Apr 11, 2011 5:26 pm

Image
Welcome SxN!

I can't answer your coding problem, but I wanted to say welcome :D
And also I just wanted to comment that Internet Explorer cannot display SVG images, at this time. So IE users (still the majority) won't be able to see the image. You may already know that, but I just thought I'd mention it. I know MS is working on it, and I see that IE9 is out already. So as an IE user, I'll be interested to learn how many SVG images it can display. (I heard IE9 was supposed to offer limited support for SVG images.)

Meanwhile, I'm sure others will be along to help with the code :D
Top
User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: Best way to present SVG in HTML

Postby tomh » Tue Apr 12, 2011 1:51 am

I'm not a Web developer, so I can't really help with your main problem, other than to say that some javascript might be involved...

but
3. The logo is actually just some contorted text, with some colour attributes. I'd like it to follow the re-sizing of surrounding (standard) text, and as SVG is "Scalable VG" I think it should be possible. How?


You can make the SVG scale to the size of the object/embed/image frame that it is placed in by adding a viewbox attribute to the SVG.

The easiest way to do this is from within inkscape. File-> save as -> "Optimised SVG" then select "Enable viewboxing". This will add the needed viewbox attribute. Other options there may be helpful for you as well as they are there to reduce the SVG's file-size.
Top
User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: Best way to present SVG in HTML

Postby tomh » Tue Apr 12, 2011 2:01 am

Oh, and for 2.

2. In order to minimize traffic, I'd like to go one step further: load it once in cache, and re-use it for subsequent web pages from my site. Is it possible, and how?


Most modern web browser have a browser cache. Simply keep the url to the item the same across pages, and send an expiry time (or Cache-Control) http header with it for a long time in the future. See http://www.mnot.net/cache_docs/ for details about cache controls.
Top
User avatar
shawnhcorey
Posts: 149
Joined: Mon Jan 07, 2008 12:17 pm

Re: Best way to present SVG in HTML

Postby shawnhcorey » Tue Apr 12, 2011 3:31 am

i just tried this on Firefox 4, Chromium, and Opera and it works:

Code: Select all

<img src="images/test.svg" alt="test">
Top
chriswww
Posts: 383
Joined: Fri Nov 19, 2010 3:04 pm

Re: Best way to present SVG in HTML

Postby chriswww » Mon Jun 20, 2011 2:29 pm

and svg works in ie9...or use svgweb for earlier IE browsers or inkscape to pre-render png if none of that works. how all this turns out in a jumble of code and fallbacks?...hmm i think one of the .js libraries (raphael.js i think) took care of all of this for you, so implementation is less complicated.
Top
Post Reply

Return to “SVG / XML Code”