开发者

Illustrator created svg not work in browsers

I created a star using Illustrator which I saved as an SVG file. Later in my HTML coding I called that SVG like this:

<object type="image/svg+xml" data="images/star.svg" width="100%" height="100%"></object>

But I am unable to see the image in an开发者_高级运维y browsers. I have tried Safari version 5.0 and Firefox 5.0 versions to preview my html.

Is it possible to get an SVG file to display in a browser?


Yes, it is possible. You can use the object tag, or you can use CSS background-image, or with recent browsers you can embed it directly inline using the<svg> tag. Read this:

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii


The SVG file format was originally designed for browsers if i am not wrong.

One crude solution to your problem is by using this pre-made SVG sample code:

  <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="svg_7" d="m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"/>
 </g>
</svg>

Now open up the SVG file you created in Illustrator with Notepad and find something called the ''d'' attribute. Copy the values of the ''d'' attribute. For example in the sample code above you would be copying this: "m64,143c1,0 95,-44 105,-40c10,4 27,59 27,59". Take extra care to include the "" tags while copying.

Now create a new Notepad file and paste the sample code i gave you above. Then replace the ''d'' value with the value you copied from your Illustrator SVG file. Make sure you set this values in the sample code with the ones you prefer. **fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#995757" fill="#FF8787"**.

Also make sure you change the width="500" and height="400" values with ones that correspond to the paper size you are using in Illustrator.

Then save the file with an .svg extension at the end of the filename and choose to save as type ''All Files'' instead of ''Text Document''.

Pretty crude solution but i think illustrator creates SVG files that are not exactly browser friendly.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜