SVG support of current browsers is good.
Even foreignObject is supported.
See related answer: https://stackoverflow.com/a/58802113/633961
This way you can insert HTML into SVG and create artistic valueable web pages.
BUT: Do web-crawlers (mainly google's spider) find and index my content which is on the page via a foreignObject (HTML) inside SVG. With the SVG being on a HTML page?
With other words: Would google index "Lorem ipsum dolor..." in above Stackoverflow answer?
Related
I have an SVG file containing a number of xlinks that navigate to a different page. For example:
<a xlink:href="us/ak">...</a>
The SVG is a US map, and I'd be happy to provide it, but it's too big to include here.
When I try to use this SVG in an AMP page, the xlinks don't work. I see in the AMP spec that xlinks in an SVG are required to have a target URI starting with "#", so I think that's why my xlink isn't working. It behaves the same whether I use an amp-img or img tag.
It works fine if I put it in an img tag on a non-AMP page.
Is there a way to get my links to go to a new page, and not just to a #-link on the same page?
The color change on hover also stops working when I put the SVG on an AMP page, but I'm tackling one problem at a time.
If you just want to link to another page, <a href="..."> should work...
I'm having a hard time finding some precise information on the browser support for the <use> element to include inline SVGs. There is a Can I Use page on SVG fragment identifiers, but as I understand this is only for the <view> element. Any idea?
I defined CSS transition rules in my svg. It's something like:
#mark #bg {
transition: fill 200ms;
fill: #245575;
}
#mark:hover #bg {
fill: #ff5c26;
}
When I drag it into browser's blank page and test it, the transition works fine. But if I embed the svg into my website using <img src="images/mark.svg" alt="">, the transition doesn't work.
Did I miss something?
Images either via <img> tags of via the CSS background-image image property cannot be interactive and have other restrictions in order to maintain user's privacy and security.
If you ask yourself "could I do this if the image was a .png or a .gif?" then you'll be on the right lines. Browsers have deliberately chosen to keep to the same mental model for SVG files so that the capability of images is easy to understand.
If you want transitions to work you'll need to use an <object> or <iframe> tag or embed the SVG inline in the html document.
I have tried using 3 PDF libraries(ZendPdf, DomPDF and wkhtmltopdf) in Zend Framework 2 to generate PDF Reports. All of them can generate basic HTML to PDF but do not seem to support SVG tags. Text and styles are rendered but SVG element comes blank in PDF.
I am trying to generate PDF Report files for charts generated by ExtJs which uses SVG tags. I am able to render simple html tags like(P with css styles) but unable to render SVG tags. It comes blank for svg. It is unable to render svg tags but other text and html can be read and rendered.
Please suggest if there is any tweak or the libraries do not support SVG tags. If you need I can provide you Sample HTML to experiment.
Hence, the question remains the same:
Blockquote
Which pdf library supports SVG tag in ZF2 (Zend Framework 2) and how to do that(if possible, please provide example code)?
Blockquote
PHP wrapper for PD4ML should do the trick. Here is a list of supported SVG tags.
I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).