473,394 Members | 1,887 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

How call an image file to use into SVG image element?

I want to open a local image file in my local PC, such as "E:\image\a.jpg", then I write the code as following:
<svg>
<image xlink:herf="E:\image\a.jpg" x="100" y="100" height="500" width="600">
</svg>

but the image don't show in my IE,how call a local image file to use the SVG image element?

Thank you very much.
Good night.
Jun 7 '11 #1
10 8506
Frinavale
9,735 Expert Mod 8TB
A ".jpg" contains information about pixels and colours to render (show) the image.

An SVG file contains math formulas that tell the software that is rendering the image how to recreate actual objects that show the image.


Here is some documentation on the SVG document structure.

-Frinny
Jun 7 '11 #2
Pls tell me how to display an image in IE by SVG <image ? >.
thanks.
Jun 7 '11 #3
Frinavale
9,735 Expert Mod 8TB
The following code uses an <object> element to load the SVG file from the server.

If it fails to load, the browser will display the content between the opening and closing object tags.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>     
  2. <html xmlns="http://www.w3.org/1999/xhtml">     
  3.   <head>
  4.     <title>SVG Example</title>
  5.   </head>
  6.   <body>
  7.  
  8.     <object type="image/svg+xml" data="mySvgFile.svg">
  9.       <img src="myPicture.png" alt="my picture"/>  
  10.     </object>
  11.  
  12.   </body>
  13. </html>
Here is my "mySvgFile.svg":
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4.  
  5. <svg width="100%" height="100%" version="1.1"
  6. xmlns="http://www.w3.org/2000/svg">
  7.  
  8. <circle cx="100" cy="50" r="40" stroke="black"
  9. stroke-width="2" fill="yellow"/>
  10.  
  11. </svg> 
Jun 13 '11 #4
my code is :

Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3.   " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg  >
  5.  
  6. <image xlink:href="c:\1.jpg" type="image/jpeg" x="20" y="20" width="100" heithg="100"/>
  7.  
  8. </svg>
  9.  
but the image "1.jpg" don't display in IE,why?
Jun 14 '11 #5
Frinavale
9,735 Expert Mod 8TB
What version of Internet Explorer are you using?
Jun 14 '11 #6
The version of my IE is 8.0.6, I feel unsure about why it don't display,thank you very much.
Best wish.
Jun 14 '11 #7
Frinavale
9,735 Expert Mod 8TB
I may be wrong but I believe you need IE9 for this to work. I don't think that IE8 supports SVGs.
Jun 14 '11 #8
drhowarddrfine
7,435 Expert 4TB
Frinny is correct. Modern browsers have always been able to render SVG. IE9 finally does, though poorly.
Jun 14 '11 #9
Thank you very much!

the rect and text in the following code all can display by my IE 8.0.6,but the image don't display, why?


Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3.   " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg xmlns=" http://www.w3.org/2000/svg">
  5.   <rect x="100" y="10" width="200" height="100" fill="green" />
  6.   <text x="92" y="400" font-size="80" fill="black">SVG Example</text>
  7.   <image xlink:href="c:\1.jpg" type="image/jpeg" x="50" y="300" width="200" heithg="600" />
  8. </svg>

My browser may be the cause of the problem, what browser are you used now?

Regards,
Jun 15 '11 #10
drhowarddrfine
7,435 Expert 4TB
xlink support is poor in all browsers and I doubt IE is better but I don't recall. Since IE didn't even support xhtml at all till recently, I question if there is any today. iirc, Firefox and Opera only supported simple links.
Jun 15 '11 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Kevin | last post by:
Hi all, Assuming I have stored the binary data of an image file in a blob field of a table, how can I display it as an image in a web page? I found some instructions on the web, such as ...
3
by: William Starr Moake | last post by:
Is there a script to convert image file paths from absolute to just img src="imagename.jpg"? This is for an IE-based WYSIWYG editor. The doImage execCommand produces an absolute file path, which...
8
by: Dave Quigley | last post by:
Hello everyone.... Im currently starting my targa support project again for ..NET and I am wondering if there are any particular interfaces or classes that Im supposed to extend in order to do this...
1
by: cfyam | last post by:
I want read some texts from database, and transfer this words to an image file, how can I do?
3
by: Scott | last post by:
Hello, I am running into a problem with my code and can't seem to figure out the solution. I know it has to do with the pciture box control and unloading the image inthe picture box but I can't...
11
by: Parrot | last post by:
Is there any routine I can call to reduce the size of an image file after uploading a file from a client. I am looking to reduce file sizes programmatically using C# in my web page after uploading....
4
by: Bruce | last post by:
I have an asp.net page that is dynamically building a table and populating cells with images (typically jpeg) and with associated metadata. How can the asp.net code efficiently determine the...
13
by: NickName | last post by:
"For the vision impaired, SVG offers tremendous potential for interactive Internet mapping applications as discussed by Gardner and Bulatov (2001).". Now, here's an SVG file with fair/medium...
4
by: rn5a | last post by:
I am storing the physical path of images, along with 3 more columns, in a MS-Access DB table. I want to provide users the option to change this physical image path (as well as the records in the...
2
by: defn noob | last post by:
from Tkinter import * import os master = Tk() w = Canvas(master, width=800, height=600) print os.path.exists('C:/me/saftarn/desktop/images/blob4.jpg') im = PhotoImage(file =...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.