Wednesday, March 23, 2011

3/23/11

Okay. I'm going to talk about the <embed> tag here, for use in .svg files.
First, what this tag does is link in an .svg from another file. It keeps you from having to clog your natural .html with with all the lines of code that come from an .svg . This is neater, and the advantage is that you can use .svg files directly from inkscape, without having to manually convert the code. Unfortunately, the <embed> tag has some drawbacks. For example, if you use the tag to display a 400 by 600 pixels .svg like this:
<embed src="example.svg" width="400" height="600"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

                                           :you will get some nasty scrollbars on the side of the image. The easiest way to drop the scrollbars, is to modify the embed code to this:
<embed src="foreground_front.svg" width="401" height=601"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

                                           :this is called "stretching" the embed tag. It's not "good" html, but it is very effective, and I haven't had a problem with it.
The second problem with .svg files in html is that when you use the .svg to make a clickable link, by default it opens the new web page inside the .svg picture. I don't know why. Here is an example:
Before:
<a
       xlink:href="http://mcoirad.deviantart.com"
       id="a3217">

What you need to do is add this: target="_top"
This opens the link in a new window.
After:
<a
       xlink:href="http://mcoirad.deviantart.com" target="_top"
       id="a3217">

1 comment:

  1. Dario, I'm about to start working on the 3rd edition of the Python text book I've been working on for years (http://ibiblio.org/jelkner/thinkcs/english3e/). I wanted to talk to you about being the illustrator for the book.

    ReplyDelete