I would like the animated svg file that I uploaded to my WordPress site to play in a loop.
This is part of the code added to a page it will only animate once.
<object data="animated.svg" type="image/svg+xml" width="300" height="150"></object>
Related
I want clickable regions on SVG image displayed on Sharepoint Modern Pages. The image itself renders well, however links are not rendered at all.
The SVG file itself is embedded using Markdown. 
<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" width="517.52" height="238.48" viewBox="0 0 517.52 238.48">
<path id="Dash1" d="M145.3,159.9l-5.11,15.84a12.13,12.13,0,0,1-10.54,8.36v0h92.42l-7.7-24.25Z"/>
</svg>
The SVG file rendered in Chrome allows to click on the image and opens the link. The same file embedded in Sharepoint does not serve the link.
When you load SVG as an image, in this case via the <img> tag it is not interactive. This is a general rule and is not Sharepoint specific.
SVG used as an image has the same capabilities as raster images so that they can be used in the same situations without needing to specially consider their security and privacy implications.
You can use image map to make clickable href in a img tag like this:
<img src="https://www.fnordware.com/superpng/pnggrad16rgb.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="bing" title="bing" href="https://www.bing.com" coords="37,35,363,104" shape="rect">
<area target="_blank" alt="Google" title="" href="https://www.google.com" coords="41,163,365,225" shape="rect">
<area target="_blank" alt="facebook" title="https://www.facebook.com" href="" coords="43,275,365,351" shape="rect">
</map>
For Modern Page, you could add the code snippet above via Modern Script Editor Web Part:
Add The Script Editor Webpart back to SharePoint Modern Experience
Reference:
How to Make image Map and use in SharePoint Online/2016/2013
I have an PDF embedded in the page using the following code:
<object width="100%" height="800" type="application/pdf" data="/example.pdf" id="pdf_content">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
Every browser shows an option to download the PDF when hovered.
Are there any parameters that can be added in order to show the save option?
Thanks
I am importing font in my svg file like this:
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800');
</style>
</defs>
But it looks like it is not working.
What can I doing wrong?
Can svg inherit styles from page, or should I import it in every page I have.
I actually rather like to have styles downloaded locally instead from googleapis, but looks like in this css file fonts are pointed relative to the server.
Can I do something with that?
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I'm trying to create an SVG document that includes image tags referencing png files. This works if I include the absolute path of the png in every image tag but if I try putting an xml:base attribute in it doesn't seem to work in IE9. However it does seem to work Firefox and Chrome. Is there a bug in IE or is there something wrong with my syntax?
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:base="file:///C:/SVG/Devices/valves/">
<image width="40" height="56" x="10" y="10" xlink:href="motorised_valve[purple].gif"/>
</svg>
For complicated reasons I don't want to go into here, I can't put the SVG document into the same folder as the images.
Thanks for any help
Mog
Would it be acceptable in your case to embed your PNG images in your document using the data:// protocol? That would solve your problem, at the expense of potentially making the XML rather large.