A web development company develops a website for me, which uses 12 icons from Font Awesome 5.15.3. They use SVG with JavaScript. After using Google PageSpeed Insights, I find the Font Awesome JavaScript becomes the performance bottleneck.
I then find "Performance & Font Awesome". But this does not provide much information on each method. I try to contact the support but get no responses by now. So I am trying to test with these methods by myself, such as SVG Sprites and individual SVG icons, meanwhile sharing my understanding of the pro and con of each method in performance.
Note: I will only consider the case that I host Font Awesome on my own server.
SVG with JavaScript: Based on my debug in Chrome DevTools, it seems that the javascript code is just find the patterns like and replace them with the corresponding svg icons. This will be time-consuming if the DOM tree of the whole page is large. Also why bother to let the JavaScript to do the task if one can just insert SVG icon to the location manually? I guess there are 3 reasons:
a. <i class="fas fa-camera"></i> is short(29 characters only) and more convenient to use than using an individual SVG Icon(normally 500 bytes) or a SVG Sprites(3 lines with total 88 characters).
b. It will not bloat the source HTML page too much.
c. It is good only if the same icon is used for many times, like below:
Web Fonts with CSS
In this method, one needs to include the Font Awesome font files with #font-face rule. And the download of the large Font Awesome font files will become the bottleneck of the performance. As far as I know, if I only use 16 icons from 1000 icons, there are no way to create a new font file containing only the 16 icons from the existing one.
SVG Sprites: This method seems to be great for my case. I can create a small svg file containing only the 16 icons I need. Then use the following way to include it in the HTML page:
<svg>
<use xlink:href="fa-brands.svg#facebook"></use>
</svg>
Though it requires 3 lines than 1 line(SVG with JS). It is still short, even if the icon is used for multiple times. I guess the disadvantage of this method is one plan to use many icons, for example, 100 icons. In such a case, the svg file will be large and become the performance bottleneck when downloading it.
Another disadvantage may be due to that to search in the SVG Sprite file, it will take some time, since the individual icons in SVG Sprite file is not indexed in any way.
Individual SVG icons: Embedding the SVG icon data to the HTML source will be the most efficient way in performance. But each SVG icon file will be about 500 bytes to 3KB, which will bloat the HTML file greatly. Also it is not good if the icon will be used in the page for many times, as in such a case, the HTML source will become huge.
Also "the browser cannot cache inline SVG as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded." based on https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
SVG + CSS: THis method is not mentioned in Font Awesome, but are widely used. See https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web for different ways to add SVG to webpage, including SVG + CSS.
Please kindly advise if my understandings are correct or not. THank you very much!
Update:
I find one interesting comparison on their site: Web Fonts vs SVG
Update 2
I add another popular method which uses SVG + CSS
From my own personal experience I can tell you that I prefer to use the 12 icons approach VS anything else. Web fonts were great solution when not all major browsers were well performing svg standard. But today it's nonsense to use a bloating icon font when you just use 12 icons from there. If you want to be able to measure the impact of leaving the font and using the svg icons instead go and take a look to the performance and speed of my own web site here https://www.simbiosis-dg-apps.com. I tell you that except for the 2 pictures of myself and my partner every thing else that you will see is svg. Sometimes embedded into the html and most of the time called through the img tag. For the icons I use a similar method like the one that is used to set icons from an icon font but using my own css system. If want a better picture see this answer How to Replace the Web Font with SVG icon in CSS(Font Awesome)?
Related
I'm not sure if this is different for every browser, I'm primarily developing for webkit.
Loading fonts for use in canvas elements is easy, using #font-face...except that it seems the actual font file isn't loaded until it is first used.
If i don't use the font in the HTML at all, this creates a problem in canvas elements, the first time a custom font is called it generates text in the default font....however subsequent attempts to use the font are fine and use the custom font referenced, as if it was loaded because of the original call.
Question 1, is this standard for all browsers? is the font downloaded if it is declared in the CSS? or at first use?
Is there a "best practice" for loading fonts into the DOM? This is for a graphic project, and I'd rather not declare every font possible in the CSS. I also only want to load fonts that are going to be used. Is there a better way to load fonts with JavaScript?
Question 1, is this standard for all browsers? is the font downloaded
if it is declared in the CSS? or at first use?
Font loading is asynchronous which mean the font may still be loading in the background at the time you'd use canvas. For canvas this problem manifests right away as what you draw the first time is final.
For the DOM the content can be updated at a later point, although causing the infamous FOUT and FOIT, or Flash Of Unstyled Text and Flash Of Invisible Text. But for canvas the content need to be manually redrawn (or put on hold causing an inconvenient delay on the client side) when the font is ready to be used.
That being said - specific browsers may implement different loading strategies - and has, we would not always necessarily know which and when, and they would in any case have to take canvas into consideration so vendors would have to conform to similar strategies.
It's in general an "old" problem and not easy to get around depending on how old browsers you want to support. And the situation is less than ideal.
There are libraries that can help you get around the loading/readiness problem (have in mind that these libraries will add to the delay themselves) such as the mentioned Font Loader library from Google. You can futher improve speed by using CDN for the fonts and also storing fonts in localStorage.
These libraries are targeting more those who need path and metrics information, I'll include them in case they could prove useful to load fonts dynamically: Font.js and OpenType.js.
Also take a look at these articles for tips & tricks to improve font loading and for workarounds:
Font Loading Revisited with Font Events (2015-02-16)
Non-blocking web fonts using LocalStorage (2014-12-31)
In relation to a font being available for canvas - I did provide an alternative option in this answer a while back, though this is more of a brute-force approach, but works specifically for canvas.
Yes, it would be nice if fonts had an 'onload' callback. But until then ...
... A common option is to use setTimeout to delay the app's start in order to give the font time to load. Of course, a delay that's too small will fail to give the font time to load and a delay that's too large will cause unnecessary delay.
... A better option is Google's webfont loader
... A Do-It-Yourself option is to continuously draw one font character to an in-memory canvas element until the opaque pixel count has changed. When the count changes, the font has been drawn on the in-memory canvas and is available for you to use. Example code for this technique can be found on this Stackoverflow Q&A.
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)
I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.
I'm trying to play around with the silhouette of fonts in Javascript, but I can't go forward without being able to get the vectors from the characters. Is there any way to retrieve this information and use it? Any examples of this being done?
Paper.JS seems like it could be pretty handy but I haven't found any font examples.
There is no direct way to retrieve shapes from characters in JavaScript. I suspect that is because font rendering is not done directly by the browser. This task is usually delegated to a third party library like cario.
You could create the text in an SVG editor such as Inkscape, convert the text to paths (Path → Object to Path) and manipulate them via JavaScript.
Using SVG Fonts also seems like a way to go. This is basically an SVG file that saves the shapes of all characters. You could load this as XML into a HTML/JavaScript setup and process the character shapes from there. Font Squirrel has a generator for making #font-face kits. It also includes an SVG version of the font in the archive.
I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?
Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.
Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.
I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.
You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.