如何将SVG元素设置为我的页面的favicon？

时间：2013-11-27 02:48:04

标签： svg favicon

我的页面上有一个SVG元素。我想用它作为页面的图标。我如何在JavaScript中执行此操作？

2 个答案:

答案 0 :(得分：16)

这样做令人惊讶令人费解。您可以在行动here中看到我的解决方案：下面介绍了该方法（通过ID或其他方式获取HTML元素，留给读者练习。）

在HTML

中
  1. 确保您的SVG元素包含属性xmlns="http://www.w3.org/2000/svg"，因为您将需要将元素的源作为其自己的文件，并且独立SVG文件需要XMLNS声明。 （另请注意，这意味着您的SVG需要是自包含的，并且不能使用<use>等内容引用其父文档中的元素。）
  2. （可选）将元素包装在<div>或<span>中，您可以使用<svg>来获取.innerHTML元素的内容。 （当前HTML标准中的SVG元素不存在innerHTML和outerHTML属性。）
  3. 在您的网页<link rel="icon">。
    4. 中加入<head>

    在JavaScript中

    1. 通过获取您已将其包装的HTML元素的innerHTML属性，或通过调用SVG元素上的new XMLSerializer().serializeToString()，获取要设置为favicon的SVG元素的来源。
    2. 通过将字符串"data:image/svg+xml,"添加到源代码，为此元素创建一个DataURL作为文档。 （如果大多数浏览器都支持SVG for favicons，我们会在这里完成，但是在编写本文时，他们没有，我们必须更深入。）
    3. 创建一个<img>元素，您将对图像进行路由，为load事件添加一个事件侦听器，一旦控件返回到事件循环，就会绘制图像（作为规范）兼容的浏览器不允许您同步读取图像 - see this crbug），并将SVG源的DataURL设置为src属性。 （此步骤和步骤8之间的步骤可以现在同步发生，也可以作为侦听器回调的一部分;它们只需要在绘制图像之前发生。）
    4. 确定要将您的图标渲染到哪个分辨率 - 我的示例将使用64x64，以便与高DPI（Retina和Super Retina）显示兼容。
    5. 创建<canvas>元素（此前称为canvasElement）并设置其尺寸（通过设置canvasElement.width = 64和canvasElement.height = 64）。
    6. 使用canvasElement.getContext('2d')（此前称为ctx）为画布创建绘图上下文。
    7. 如果您要重新使用之前创建的画布，请设置ctx.globalCompositeOperation = "copy"，或使用ctx.clearRect(0, 0, 64, 64)清除它。
    8. 在您添加到步骤3中创建的load元素的<img>侦听器后面的执行序列中的某个位置，使用ctx.drawImage(svgImg, 0, 0, 64, 64)将图像绘制到画布上（其中{{1}是svgImg元素，您将<img>设置为SVG DataURL。
    9. 使用src从画布创建PNG DataURL，并将 设置为HTML中canvasElement.toDataURL()元素的href属性。

答案 1 :(得分：0)

我知道它已经得到了回答，但是对于这样一个简单的任务来说工作太多了，只需将您的 svg 存储在一个 svg 文件中并将其用作 Head Tag 中的 favicon。

<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
相关问题
最新问题