SVG code insertion

[nikulinpi]

Is it possible to do something like that in html5?

<img wight=4455.....>
<svg>....</svg>
</img>

[zcorpan]

No, but you can use SVG together with XHTML5.

In HTML5 you could insert SVG images with e.g. <object>.

[wgabrie]

Hey w3schools.com lists three methods for inserting SVG in html. See: SVG in HTML

SVG files can be embedded into HTML documents with the <embed> tag, the <object> tag, or the <iframe> tag.

[haka]

The content of <object> is for alternate HTML or <param>. You cant put invalid HTML-code in this tag. <embed> does not exists in official HTML specs.

I see a way to support different XML-code in non-modular XML and SGML with the script tag:

<script type="image/svg+xml"><![CDATA[
<svg>... </svg>
]]></script>

[zcorpan]

The content of <object> is for alternate HTML or <param>. You cant put invalid HTML-code in this tag.

Right, but you can point to an SVG file in data="".

<embed> does not exists in official HTML specs.

http://www.whatwg.org/specs/web-apps/cu ... #the-embed

I see a way to support different XML-code in non-modular XML and SGML with the script tag:

<script type="image/svg+xml"><![CDATA[
<svg>... </svg>
]]></script>

This has been proposed (but without the CDATA), I think.

[haka]

Is there somthing new about this task? I found some pages from 2007 and 2008, but not newer (I didnt searched very long )

But what I found seems to be more difficult as I thought. To write <svg> directly in the HTML code by using text/html as content type wont be valid. And writing <svg> without CDATA inside a <script> element or something equal will cause other problems like the <script> element in SVG. An other, new element instead of the <script> or <object> wont work backward compatible. The <object> element has only the attribute 'data' which can be used backwards compatible, so its not a real good idea to use it with XML code.

The way to implement it is <![CDATA[ - if valid in text/html - or using HTML comments around the <svg> data or use XML namespaces to differ the SVG code from HTML.

XHTML will work, but when XHTML is supported widely we are all sitting on a bank to enjoy our evening of life.

[zcorpan]

Is there somthing new about this task?

The spec now allows direct embedding of SVG and MathML in text/html. It's not supported in any browser, yet.

But what I found seems to be more difficult as I thought. To write <svg> directly in the HTML code by using text/html as content type wont be valid. And writing <svg> without CDATA inside a <script> element or something equal will cause other problems like the <script> element in SVG. An other, new element instead of the <script> or <object> wont work backward compatible. The <object> element has only the attribute 'data' which can be used backwards compatible, so its not a real good idea to use it with XML code.

The way to implement it is <![CDATA[ - if valid in text/html - or using HTML comments around the <svg> data or use XML namespaces to differ the SVG code from HTML.

XHTML will work, but when XHTML is supported widely we are all sitting on a bank to enjoy our evening of life.

I don't understand what you're trying to say here...

[H3g3m0n]

I'm just having a play around with trying to embed an external SVG into a page while trying to keep the DOM to allow for scripting. I'm just tinkering and not really a webdev so I might be missing something obvious. Of methods listed at http://www.w3schools.com/svg/svg_inhtml.asp

Code: Select all

<embed src="logo.svg">

- Is a bit odd. As it seemed to be a kind of embedded container, under Chrome it doesn't correctly preserve the SVG's included width/height and defaults to the containers height/width, also doesn't scale the actual graphics to the size of the embedded. Under Firefox it seems to keep the svg size but I end up with scroll bars inside the page and doesn't scale.

Code: Select all

<img src="logo.svg">

Preserves the width/height and doesn't do any odd things like adding scroll bars. But looses all DOM/scripting capabilities.

Code: Select all

<object data="logo.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

Doesn't do scripting, doesn't seem to preserve width/height in Chrome. Doesn't work for me in Firefox.

Otherwise I guess some server side hackery could be used to raw insert the <svg> directly in the page (or is there some kind of #include for html?) but doesn't make sense for the same svg on multiple pages and is kind of dodgy.

The main issue I see is forcing the width/height to be specified when it's already in the SVG document.

JavaScript hacks are a possibility, it could be used to extract the width/height from the SVG and reset it, or alternatively the reverse to set the SVG inside the container to the same height/width as the container itself. Otherwise it could load the .svg and dump it into the document perhaps. But it seems unnecessary work.

Having something like:

Code: Select all

<svg src="file.svg" onload="function();"/>?

Would allow for an external SVG to correctly store the width/height and for allow scripting. It would act like the normal inline SVG.

[zcorpan]

I suggest you try to get any bugs you find fixed in browsers (by filing bugs in their bug trackers and attaching tests). <embed> and <object> *should* work fine.

[spmorr02]

I've played around with this some so I'll tell you what I've found out.

In FF 3.6 you are already able to write <svg></svg> inline and serve the page as text/html.

What I've been doing for cross-browser results is writing it inline and serving it as XHTML.

Either way I did it I had to wrap my script in <![CDATA[ tags to make sure scripting worked properly.

[mskinner]

...XHTML.

Either way I did it I had to wrap my script in <![CDATA[ tags to make sure scripting worked properly.

As per XHTML 1.0 http://www.w3.org/TR/xhtml1/#h-4.8

[zcorpan]

I've played around with this some so I'll tell you what I've found out.

In FF 3.6 you are already able to write <svg></svg> inline and serve the page as text/html.

Yes, but only when html5.enable is set to true. It also works in the IE9 tech preview.

However, I thought H3g3m0n wanted external SVG:

... but doesn't make sense for the same svg on multiple pages and is kind of dodgy.

What I've been doing for cross-browser results is writing it inline and serving it as XHTML.

Yep.

Either way I did it I had to wrap my script in <![CDATA[ tags to make sure scripting worked properly.

Yes.

[spmorr02]

Yes, but only when html5.enable is set to true.

Haha. Yes, I had completely forgot that I had set that to true.

Switching back and forth between Minefield and updating to new FF releases can do that to you.

[H3g3m0n]

Is it actually expected HTML5 behavior that the embed tag pulls in width/height information from the SVG files?

I could see it being an issue since the embedded element isn't necessary going to load in a decent time. So I'm not sure that it's a browser bug.

Ignoring the resizing stuff, The other problem with the embed element is that it doesn't seem to support onload.

Being able to src a SVG file directly would be fantastic.

There are a bunch of handy use cases for it to, for example you could make 1 .svg button template and just change the text and colour and so on.

http://gnome-look.org/CONTENT/content-f ... hinies.svg

[zcorpan]

Is it actually expected HTML5 behavior that the embed tag pulls in width/height information from the SVG files?

Yeah.

I could see it being an issue since the embedded element isn't necessary going to load in a decent time. So I'm not sure that it's a browser bug.

Same is true for JPG images. They resize fine, no?

Ignoring the resizing stuff, The other problem with the embed element is that it doesn't seem to support onload.

Hmm. You're right. I guess we should fix that. Filed http://www.w3.org/Bugs/Public/show_bug.cgi?id=9362

Being able to src a SVG file directly would be fantastic.

That's possible already with embed/object, no?

There are a bunch of handy use cases for it to, for example you could make 1 .svg button template and just change the text and colour and so on.

http://gnome-look.org/CONTENT/content-f ... hinies.svg

You can do that with embed/object, no?