I have two SVG images, both together have about 8000 lines and consist of several shapes with gradients. No patterns, filters, texts, just basic graphical elements with strokes, simple- or gradient fill.
At the moment they are injected inline into the HTML while it is generated, so the source code becomes quiet large. Does this decrease performance for animation, so that it would better to embed the svg differently?
Is there a general rule of thumb to follow when embedding svg?
Greetings philipp
If you use the HTML5 SVG tag to embed the SVG inline that will not just increase the html file size but also keep DOM busy and your browsers renderer.
If you use iframes you don't really know when it gets loaded or rendered, at least not for all browsers.
HTML5 offers you JavaScript and that might be the solution.
Just wait for the body to load and then inject the SVG.
You can use body-onLoad or jQueries ready()-funktion
Here is how it's done in jQuery:
<!DOCTYPE html>
<html>
<body>
<div id="svg-01" class="placeholder"></div>
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
$("#svg-01").replaceWith('<svg><!--// some svg //--></svg>');
});
</script>
</body>
</html>
I would even go a step further and rather use replace it with an iframe and gziped SVG as described here.
Related
Here is a QR code which encodes "sup":
And here is a simple HTML snippet to render that larger:
<img style="width:400px" src="data:image/gif;base64,R0lGODdhFQAVAPAAAAAAAP///ywAAAAAFQAVAEACT4QPoRfozJpMdJrZKrY6YSgpWeVpI/ItC3l5I3eiZCxnofU+1IzvLCtSBX0bUatl+xyDmxLTxbxFnxdOVRZRoU7TnHBrDBt9xE7EBW2eRQUAOw==">
Unfortunately, this renders in browsers as a larger blurry image:
I know that I could recreate the image at a large resolution. But I am from the school of thought that images should not be upsized for presentation purposes.
Can I do anything to render this without being fuzzy?
You can apply a CSS rule to change the scaling algorithm.
img.qr {
image-rendering: pixelated;
}
This has decent browser support. https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
What I prefer to use instead is SVG for QR codes. Then, they can be saved for other purposes elsewhere.
Try adding the image-rendering: pixelated; CSS style to that element. This will preserve the pixels as it scales.
Keep in mind that there’s different cross browser support for this tag though, e.g. Chrome and Firefox require different tags to get this to work. More info here
I have just added an SVG image to my personal website for the logo but when I view the image on my mobile device it's displaying, but in a different font. That's my problem. How do I fix this?
The way I am adding the SVG is as I would a normal image.
<img src="images/logo.svg">
I have a feeling this is not the correct way to add SVG images, I also have no fallback for browsers that do not support SVG so if anyone could offer advice on how to do that, that would be great.
Thanks
If you create .svg from Ilustrator (e.g), first, be sure to create outlines from your text object, then, export object to .svg file, wich will be read from any (modern) browser.
Displaying SVG images using <img> has quite good browser support nowadays: http://caniuse.com/#feat=svg-img so I personally would recommend it.
If you need to support very old browsers like IE8 or Android 2.3, I would use
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
to check for feature detection (source: https://css-tricks.com/test-support-svg-img/) and use a PNG file then (by replacing the src attribute of the <img>).
To include a custom font in a SVG, one can include it in the SVG's <def>:
<defs>
<style type="text/css">
#font-face {
font-family: 'Gunny Rewritten';
src: url('GunnyRewritten.woff');
}
</style>
</defs>
Setup
The topic SVG vs. Icon Font is well covered in the web. But even after long searches, I did not find advice concerning my special situation.
I have a site served by a CMS. On one page, I have elements containing several icons. These elements are repeated over the page. So each icon shows up a lot of times on the page. Now I have a hard time to figure out how to realize those icons best.
Inline SVG
In general, I totally see the benefits of using Inline SVG. It's most simple and straightforward, and you can do the most with it. On other, non-repeated places on my website I already use it and I love it.
But: Repeating the exact same svg markup over and over again seems like blowing up the document unnecessarily.
Referenced SVG
I could use the SVG via the <img>, <object> or <embed> tag. Doing this, the SVG would be referenced and therefore only data that is unique is transfered via the web.
But: Besides things like using the side CSS for the SVG ist not possible, I have several extra HTTP requests.
Icon Font
I could use an Icon Font. Only one HTTP request and content is referenced.
But: Bad markup, bigger file than the SVGs.
SVG Sprites
I could use a SVG sprite. Only one HTTP request and reference.
But: It's quite comlicated and feels as much as a hack as using the Icon Font does. Plus I have the impression that background-SVG ist not so easy to use.
Conlusion
To come up with the best solution, I think the following questions are relevant:
Is repeating the SVG markup so bad compared to the other solutions? It's what I do with the HTML markup anyway. A SVG-Icon are about 30 lines / 1.6kB of code
Networkwise: Are several small HTTP requests (referenced SVG) or one big (bigger than the small ones combined, icon font) request faster?
Which advantages do I really have using SVG sprites compared to using an Icon Font? I guess it's at least as much CSS-fiddeling as an Icon Font.
Please note: I use AJAX, so only content is transferred. The icon font would load with the first request of my website (and then be cached), the referenced SVGs would load with the first call of this special page and then be cached. Inline SVG would be transferred on each call of this page, as content is not cached in the browser.
My feeling is an icon font or inline SVG would be best. But I am thankful for every contribution and aspect of this topic.
Why would you repeat exactly the same markup when you could use <use> elements to reference and display multiple instances of that markup? Here's a link to an example.
As for <img> <object> etc browsers can cache these if you set Expires and Cache-Control appropriately in your http responses.
Using Icon fonts would seem like you're shoehorning into something inappropriate for your use case.
In all given your requirements, <use> elements would seem most appropriate.
There might not be a best fit answer to this situation beyond weighting out the pros and cons of each.
I personally tend to go on the all inline approach, especially if the combined file footprint is smaller than a font or one huge svg.
using <img> is great if the browser can cache them (especially if you have lots of repeat visitors)...but you end up giving up on the styling and interaction options. you also need to add a bit extra mark up for some older browsers to serve a png file in the case that svg is not supported.
If you are interested, here is a hack I use for serving pngs vs. svg basically it fixes IE:
<!--[if lte IE 8]><img src="img/youricon.png" /><![endif]-->
<!--[if gt IE 8]><img src="img/youricon.svg" /><![endif]-->
<!--[if !IE]> --><img src="img/youricon.svg" /><!-- <![endif]-->
Can any one please give me some clarification on this:
I have to do some annotations on images like measurements, mark and text. Is this possible with SVG?
Do we need to install any external plugins to work with SVG in a web browser?
Will it be supported by mobile browsers?
what are the advantages of SVG over HTML5?
Question: I have to do some annotations on image like measurement,mark and text. How can it possible with svg?
Answer: This is possible using a combination of SVG, which when embedded in HTML becomes part of the DOM, and JavaScript to manipulate the SVG elements just as you would with any HTML element and JavaScript.
Question: Do we need to install any external plugins to work svg in a web browser?
Answer: No, most modern browsers render SVG.
Question: Will it support mobile browsers?
Answer: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#History_of_SVG_mobile_support
Question: what are the adventages of svg over Html5?
Answer: SVG is part of the DOM, which means it can be styled by CSS, manipulated with JavaScript, animated, etc.. Html5 Canvas is a JavaScript API which allows us to draw programatically. This means that SVG is nice for quick sleek graphics and can also be created with commercial or open-source SVG Editors. SVG can be animated or interacted with via JavaScript and styled via CSS. With the HTML5 Canvas you must use the JavaScript API to give life to your canvas. HTML 5 Canvas is higher difficulty curve, but can be much more robust than SVG (Chrome Experiment).
I know we can load an image into a canvas but I wonder if we are able to load a simple HTML file into a canvas. If yes, how?
Thanks.
Short answer: No, you cannot.
Long answer:
Not reliably, BUT yes you can in certain (possibly hackish) ways. The key is in what you define as an "image". You are aware that you can add an image to the canvas with drawImage() - what you mightn't be aware of is what that "image" can be (not necessarily an actual image).
Firstly, the "image" can be a HTML5 video element - so you can add videos to the canvas.
Secondly, in most modern browsers the "image" can be an SVG document, which can contain HTML via the SVG <foreignObject> element.
Browser support:
SVG documents in drawImage() are not currently supported in Firefox. The related bug is here and I think a fix is planned.
<foreignObject> is buggy in most browsers - Firefox (ironically) seems to have the best support.
Example:
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" height="800" width="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Hello world!</p>
<input type="date"/>
</body>
</foreignObject>
</svg>
Try loading that file with canvas drawImage() in Opera - as you'll see its interactivity is fairly buggy, but it displays fine.
He's talking about HTML5 / Javascript.
It's not possible without writing your own Rendering Engine (in Javascript).
html2canvas or rasterizeHTML.js seem the tools you are looking for.
A third solution without plugins is presented by Mozilla, but I could not get it running here: Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas.
There is also PhantomJS, which supports Screen Capturing