如何在 GAS 中将 svg 文件作为 Web 应用程序提供答案

【问题标题】：How do I serve an svg file as a web app in GAS如何在 GAS 中将 svg 文件作为 Web 应用程序提供
【发布时间】：2021-01-29 21:09:10
【问题描述】：

我正在尝试学习如何在 Google Apps 脚本中将一系列静态 svg 文件作为网络应用提供。我想提供的文件可以在我有代码的 IcoMoon 上找到。我不知道如何将它们作为 Web 应用程序的一部分应用。这是我迄今为止尝试过的代码：

function doGet() {
    return createHtmlOutputFromFile('KI_SVG_Test');
       getContent()  
}

<style>

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

<style>

<!DOCTYPE html>
<html>
  <head>
    <!--1-->
    <link rel="stylesheet" href="https://i.icomoon.io/public/e29d02ae9a/KernskyIntergraph/style-svg.css">
    <!--2-->
    <script defer src="https://i.icomoon.io/public/e29d02ae9a/KernskyIntergraph/svgxuse.js"></script>
    <!--3-->
    <svg class="icon icon-E000-uldf-f"><use xlink:href="#icon-E000-uldf-f"></use></svg>
   
  </head>
  <body>
    <symbol id="icon-E000-uldf-f" viewBox="0 0 32 32">
      <path d="M-25.942-16.073c0 0 0 0 0 0zM8.65 20.977c0 0 0 10.737 0 10.737s2.685 0 2.685 0c0 0 0-10.737 0-10.737s-2.685 0-2.685 0zM8.65 29.030c0 0 0 2.685 0 2.685s16.105 0 16.105 0c0 0 0-2.685 0-2.685s-16.105 0-16.105 0zM22.072 20.977c0 0 0 10.737 0 10.737s2.685 0 2.685 0c0 0 0-10.737 0-10.737s-2.685 0-2.685 0z"></path>
    </symbol>    
  </body>
</html>

谁能告诉我如何在 GAS 中将单个 svg 文件作为 Web 应用程序提供服务？

【问题讨论】：

标签： javascript html css svg google-apps-script

【解决方案1】：

我发布了一个显示 icoMoon svgs 的网络应用程序的工作示例。我没有 IcoMoon 的付费帐户，所以我无法访问他们所有的 svg。但我从项目Github page 中检索到了这个样本中的那个@

Working Example

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setTitle("SVG Demo").addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--1-->
    <link rel="stylesheet" href="https://i.icomoon.io/public/e29d02ae9a/KernskyIntergraph/style-svg.css">
    <!--2-->
    <script defer src="https://i.icomoon.io/public/e29d02ae9a/KernskyIntergraph/svgxuse.js"></script>
    <!--3-->
    <?!= include('style'); ?>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 16 16">
      <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/>
    </svg>
  </body>
</html>

style.html

<style>
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
</style>

【讨论】：