Can a pure SVG document arriving at a browser, support a favicon.ico specification? My case is machine-generated pure SVG, no <html> or <head> tags available.
Yes, since SVG is XML, you can add the (x)html link element anywhere in the SVG:
<link xmlns="http://www.w3.org/1999/xhtml" rel="shortcut icon" href="favicon.ico" />
There's absolutely no need to wrap this in foreignObject.
I recommend putting the link element as a child of a defs element though, just to let the SVG engines know that it can be skipped for the actual SVG rendering.
Do note that this isn't "pure" SVG; it's an xhtml/svg hybrid — but it should work in all the browsers that support SVG.
Related
I use JSF 2.3 for developing web application.
As a web developer, I care about the performance of loading speed of a site.
As I was exploring on how I could make my site faster, I encountered this post on Stack Overflow. And the quote from the accepted and most up-voted answer said
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
I know that JavaScript performs better when it is placed at the bottom of the <body>, but I want to include reCAPTCHA and Google instructs us to place the required external JavaScript before the closing </head> tag.
So, I decided to include the required external JavaScript before the closing </head> tag and after CSS files to boost the performance.
However, my CSS files are declared in a JSF way like <h:outputStylesheet name="css/default.css"/>, and I realized that the CSS files declared this way are always placed after files that are declared in a non-JSF way, which is <script src="https://www.google.com/recaptcha/api.js"></script>. I also considered making the external JavaScript behave in a JSF way by changing <script> to <h:outputScript>, but the <h:outputScript> can only render local scripts as described in this post .
So, the result will always be as follows.
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>
insted of
<head>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
Maybe I'm thinking too much, and the placement order of link and script doesn't affect the performance that much, but if the loading speed gets faster even a little, I want to follow the better way.
When my ejs file is linked to a semantic ui, the second .css link doesn't work. Is it possible to change html and body background color using semantic-ui?
I linked these two css files:
<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
In homepage.css, when I type html {background-color:pink} this doesn't have any effect. What am I missing?
Not exactly what your asking for but could be a workaround.
If you were to edit site.variables which is usally located at: semantic/src/site/globals/site.variables
And add an entry #pageBackground: #5CDB95; and change the #5CDB95 to a colour of your choice, that will then be the default background colour of all pages where you include semantic ui.
After your entry dont forget to run gulp build-css
Hope this is of some help... Not sure why your css isnt overriding sematic ui, I know it sounds stupid but check you have included the <html> tags in your file.
Is there any way to setup Firefox and Chrome to work with escape=false attribute in h:outputText tag. When there is some html that needs to be shown in the browser, Firefox and Chrome show parsed string correctly, but any other links in application are freezed (??).
The example html from db:
<HEAD>
<BASE href="http://"><META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href=""><META name=GENERATOR content="MSHTML 9.00.8112.16434">
</HEAD>
<BODY><FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT></BODY>
Parsed HTML on the page:
läuft nicht
What is very weird, is that in IE everything works (usually it is opposite).
I use primefaces components (v2.2), .xhtml, tomcat 7 and JSF 2.0
You end up with syntactically invalid HTML this way:
<html>
<head></head>
<body>
<head></head>
<body>...</body>
</body>
</html>
This is not right. There can be only one <head> and <body>. The browsers will behave unspecified. You need to remove the entire <head> and the wrapping <body> from that HTML so that you end up with only
<FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT>
You'd need to either update the DB to remove unnecessary HTML, or to use Jsoup to parse this piece out on a per-request basis something like as follows:
String bodyContent = Jsoup.parse(htmlFromDB).body().html();
// ...
Alternatively, you could also display it inside a HTML <iframe> instead with help of a servlet. E.g.
<iframe src="htmlFromDBServlet?id=123"></iframe>
Unrelated to the concrete problem:
Storing HTML in a DB is a terrible design.
If the HTML originates from user-controlled input, you've a huge XSS attack hole this way.
The <font> tag is deprecated since 1998.
It seems to me that you're trying to do something that JSF was not really meant to do. Rather than try to insert HTML in your web page, you ought to try having the links already on your page and modifying the "rendered" attribute through an AJAX call.
I have a basic html file. In the file I have an image tag which references a SVG file.
When I view the file in IE10 the page remains blank rather then showing the expected vector image.
The SVG file was made with Inkscape.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<img src="Images/MyLOGO.svg" width="400"/>
</form>
</body>
</html>
What is the best way to troubleshoot this problem?
One reason could be because in IE9+, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.
The SVG file must have been invalid. I have replaced it with a different SVG file and all works as expected.
I'm working on a thumbnailer whereby a service takes thumbnail images of HTML content in a form-less IE9 control. Everything is working smoothly with a DrawToBitmap call along with a couple of GDI calls, but SVG content is not displaying. Everything else seems to display just fine, but no SVG.
I figure that this has something to do with how SVG is implemented in IE, but I don't know the details. Any thoughts?
TIA.
The answer came from Ted Johnson of IEBlog:
IE9 has no separate SVG engine; it’s all one DOM and rendering
pipeline. However, if your document isn’t in 9 standards document
mode, you’ll not get any SVG content. I think, by default, the
WebBrowser control in .NET defaults to compatibility mode. Try adding
a meta tag to the top of your HTML page to force IE9 mode:
<meta http-equiv="X-UA-Compatible" content="IE=9">
This, indeed, turned on SVG rendering like a light switch.
You can also set a doctype of HTML4 strict or HTML5.
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
From http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/ :
Before I begin, I’d just like to point out that on my test page, Internet Explorer 9 refused to display any of my SVG images on a basic HTML page until I declared the HTML4 strict or HTML5 doctypes.