Question

我试图了解SVG的工作原理。我试图使用Github（link）中的某些主题。有以下代码：（在common/head_tag.html中）

<div class="popular-item">
<a href="/c/debt" class="popular-link">
  <div class="popular-icon">
      <svg width="48px" height="45px" viewBox="0 0 48 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
      <title>Page 1 Copy 4</title>
      <desc>Created with Sketch.</desc>
      <defs>
          <polygon id="path-1" points="0 0.00434322457 42.9739472 0.00434322457 42.9739472 24.437827 0 24.437827"></polygon>
      </defs>
      <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Community-Landing-V2-Nav" transform="translate(-1197.000000, -562.000000)">
              <g id="Popular-Secion" transform="translate(960.000000, 417.000000)">
                  <g id="Group-3" transform="translate(189.000000, 110.000000)">
                      <g id="Page-1-Copy-4" transform="translate(48.000000, 35.000000)">
                          <path d="M40.4114464,0 L37.9103214,3.0488482 L40.8416071,3.0488482 L40.4114464,0 Z M26,7.90245367 L28.0533571,12 L43,12 L43,7.90245367 L26,7.90245367 Z" id="Fill-1" fill="#0073B9"></path>
                          <g id="Group-11" transform="translate(0.000000, 1.000000)">
                              <path d="M16.7680604,21.8779604 L15.2100226,22.300002 C14.8882113,22.387166 14.5564377,22.1990595 14.4685887,21.8800571 C14.3807396,21.5607552 14.5703245,21.2312692 14.8921358,21.1441052 L16.4498717,20.7220636 C16.771683,20.6348996 17.1034566,20.8230061 17.1913057,21.1420085 C17.2791547,21.4610108 17.0895698,21.7907964 16.7680604,21.8779604 M20.3502491,20.8334898 L18.5310792,21.3265206 C18.2092679,21.4136847 17.8771925,21.2258776 17.7893434,20.9065757 C17.7014943,20.5875734 17.8910792,20.2577879 18.2128906,20.1706238 L19.6782491,19.8312532 C19.9997585,19.7440892 20.6720604,20.7463257 20.3502491,20.8334898 M38.9739472,18.328198 L31.9550792,18.328198 C31.6214943,18.328198 31.3513057,18.0598167 31.3513057,17.7291326 C31.3513057,17.3984484 31.6214943,17.1300671 31.9550792,17.1300671 L38.9739472,17.1300671 C39.3069283,17.1300671 39.5777208,17.3984484 39.5777208,17.7291326 C39.5777208,18.0598167 39.3069283,18.328198 38.9739472,18.328198" id="Fill-2" fill="#0073B9"></path>
                              <path d="M44.2082113,37.5212369 C43.8830792,38.4746495 43.3665509,39.2977655 42.4313057,39.8264408 C41.4664755,40.3724889 40.4539472,40.432695 39.4233057,40.1646132 C38.600966,39.9510464 37.8661736,39.5397879 37.2403623,38.9479113 C36.744966,38.4785435 36.3277585,37.966642 36.0147019,37.3603878 C35.7493434,36.8472882 35.5685132,36.3213088 35.4380981,35.7587863 C35.2636075,35.0045629 35.2959094,34.2725049 35.483683,33.5389492 C35.6186264,33.0111726 35.8320604,32.4977735 36.1725887,32.0754323 C36.5445132,31.6138524 36.995834,31.2298514 37.5781736,30.9902252 C38.3111547,30.6885958 39.0544,30.5343364 39.827834,30.6945864 C40.7790792,30.891679 41.6454943,31.2819701 42.3763623,31.9388454 C42.8771925,32.3890431 43.2711547,32.9060366 43.6150038,33.4817385 C43.985117,34.1011722 44.1430038,34.7808119 44.3244377,35.4556592 C44.3890415,35.6964835 44.3561358,35.9633671 44.3679094,36.21797 L44.4005132,36.222463 C44.3404377,36.6567854 44.3473811,37.1132733 44.2082113,37.5212369 M29.0870038,24.4391449 C28.3781736,24.4391449 27.8039849,23.8697332 27.8039849,23.1661308 C27.8039849,22.4631275 28.3781736,21.8931167 29.0870038,21.8931167 C29.7955321,21.8931167 30.3700226,22.4631275 30.3700226,23.1661308 C30.3700226,23.8697332 29.7955321,24.4391449 29.0870038,24.4391449 M23.6675321,36.5348756 C23.3861736,37.49997 22.8850415,38.3865869 22.1031547,39.06413 C21.6928906,39.4202744 21.2267774,39.7201066 20.7618717,40.0076581 C20.1481358,40.3874656 19.4604377,40.5348357 18.7250415,40.5728763 C18.2540981,40.4821179 17.7668528,40.4392847 17.3170415,40.2871221 C16.8240604,40.1205819 16.4044377,39.805773 16.0382491,39.4244678 C15.6593811,39.0302828 15.3780226,38.5806841 15.1890415,38.0804645 C14.7751547,36.9877691 14.8083623,35.8678162 15.1359094,34.7736231 C15.3088906,34.1952254 15.6044377,33.6494768 15.9700226,33.1432665 C16.3706264,32.5888314 16.8319094,32.1020907 17.395834,31.7189884 C17.8667774,31.3990874 18.3824,31.1669496 18.9445132,31.0075981 C19.6373434,30.8114042 20.3205132,30.7946304 21.0042868,30.9566776 C21.5842113,31.0938636 22.0922868,31.3682356 22.547834,31.7773973 C23.1328906,32.3030772 23.4851925,32.9243081 23.7164377,33.6596609 C24.0225509,34.6334418 23.9392302,35.5997344 23.6675321,36.5348756 M46.6785509,31.9990515 C43.1380226,25.6681277 37.3433057,27.5093554 36.5034566,27.8088881 C35.6633057,28.1081213 35.2672302,27.5228344 35.2672302,27.5228344 L18.7751547,0.163514917 C18.7751547,0.163514917 17.3221736,5.61890451 17.1482868,6.31232278 C16.9740981,7.00604058 17.3224755,7.4748093 17.3224755,7.4748093 C17.3224755,7.4748093 25.8513811,21.9326551 26.1837585,22.467321 C26.515834,23.0016874 26.1004377,23.6657514 26.1004377,23.6657514 C26.1004377,23.6657514 24.5052679,26.3783198 23.9730415,27.3661788 C23.4402113,28.3543372 22.5128151,27.9170194 22.5128151,27.9170194 C18.2402113,26.4903451 15.8260226,28.4681597 13.9618717,30.2171313 C10.8605887,33.1255941 9.81938113,40.0328188 15.0115321,42.6357582 C22.0304,46.1552678 25.5461736,40.2517772 26.7232302,38.1859 C27.9002868,36.1200228 28.5668528,29.9211929 28.5668528,29.9211929 L29.5552302,28.1800092 C30.8530415,30.0116518 30.8587774,31.0216762 30.8587774,31.0216762 C31.4610415,36.21797 32.291834,37.5449 32.291834,37.5449 C35.496966,44.6971425 41.1244377,43.9087723 42.9644377,43.2453073 C44.8041358,42.5821419 50.2187774,38.3299752 46.6785509,31.9990515" id="Fill-4" fill="#0073B9"></path>
                              <polygon id="Fill-6" fill="#0073B9" points="10.3000453 11.6996885 1.19363019 14.2193578 2.33204528 17.9242781 13.8248755 14.9028915"></polygon>
                              <g id="Group-10" transform="translate(0.000000, 2.995327)">
                                  <mask id="mask-2" fill="white">
                                      <use xlink:href="#path-1"></use>
                                  </mask>
                                  <g id="Clip-9"></g>
                                  <path d="M33.4346264,16.5960601 L39.9116075,16.5960601 C40.7677585,16.5960601 41.4645132,15.9050381 41.4645132,15.0555633 L41.4645132,3.04250369 C41.4645132,2.19302887 40.7677585,1.50200687 39.9116075,1.50200687 L24.4199849,1.50200687 L33.4346264,16.5960601 Z M39.9116075,18.0937238 L32.5742491,18.0937238 L21.7709283,0.00434322457 L39.9116075,0.00434322457 C41.6000604,0.00434322457 42.9739472,1.36721714 42.9739472,3.04250369 L42.9739472,15.0555633 C42.9739472,16.7308499 41.6000604,18.0937238 39.9116075,18.0937238 Z M7.40141887,7.08529694 L2.20443774,8.56319142 C1.95809811,8.63328208 1.75432453,8.79413116 1.63024906,9.01668397 C1.50617358,9.23893726 1.47719245,9.49563681 1.54813585,9.73945645 L5.18375849,22.2539339 C5.3274566,22.7490615 5.8509283,23.0432026 6.35356981,22.9078138 L20.6050415,19.0854767 L7.40141887,7.08529694 Z M6.11024906,24.437827 C5.03794717,24.437827 4.04262642,23.7348237 3.73319245,22.6681876 L0.0975698113,10.1546088 C-0.0850716981,9.52588961 -0.00990188679,8.86422181 0.30949434,8.29151524 C0.628890566,7.71880866 1.1538717,7.30395583 1.78813585,7.12333759 L7.79779623,5.41450337 L23.6486642,19.8202304 L6.74753208,24.3533588 C6.53530566,24.4105695 6.32126792,24.437827 6.11024906,24.437827 Z" id="Fill-8" fill="#0073B9" mask="url(#mask-2)"></path>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </g>
  </svg>
  </div>
  <div class="popular-description">Beat Debt</div>
</a>
</div>

但是我不明白如何将svg更改为其他文件（例如，我在Assets文件夹中有icon_book）。我找不到从Assets文件夹到svg文件的相对路径。我应该改变什么？如何运作？

Answer 1

SVG文件不是图像，例如PNG或JPG。 SVG是VECTOR图像文件。 SVG是使用XML标记构建的，浏览器通过绘制每个点和线来打印出来。（在其他扩展名中，浏览器仅打印整个文件）。这是惊人的，因为您具有更大的灵活性和可伸缩性。您可以更改svg图片的大小，而不会失去质量！

如果您还有其他SVG文件（XML标记），只需复制并粘贴到此文件中即可。删除实际的SVG标记（....），然后粘贴新的。

如果您还没有，那么您需要创建！

Answer 2

有几种方法可以在html内添加svg，简单的方法是：

嵌入（如您的示例中所示）：打开svg文件，复制<svg ...>...</svg>并将示例中的<svg ...>...</svg>替换为从文件中复制的新<svg ...>...</svg>。
将图像添加为<img>标签：将<svg ...>...</svg>替换为<img src="/assets/icon_book.svg">（这意味着assets文件夹位于服务器/项目的根文件夹中）。

More info with examples。

Answer 3

我认为问题在于如何将svg嵌入到html标记中。

根据您的示例，可以直接将其直接内联插入，或通过其他方式包含在内以指向外部文件。您应该通过其他方式更改标记以包含svg，请参见：

Do I use <img>, <object>, or <embed> for SVG files?

Answer 4

<svg>和</svg>之间（包括其中）的所有内容都是SVG的 code 。在下面的示例代码中，我将原始SVG更改为其他SVG。

在第二个示例中，更改为使用非嵌入式版本，其中<img />的来源是SVG资源。我相信这就是你所追求的。

<div class="popular-item">
<a href="/c/debt" class="popular-link">
  <div class="popular-icon">
    <svg width="64" height="64" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg">
       <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
      <circle cx="125" cy="125" r="75" fill="orange" />
      <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
      <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
    </svg>
  </div>
  <div class="popular-description">Beat Debt</div>
</a>
</div>
<p>
And a non-embed version
</p>
<div class="popular-item">
<a href="/c/debt" class="popular-link">
  <div class="popular-icon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" style="width:64px;height:64px" />
  </div>
  <div class="popular-description">Beat Debt</div>
</a>
</div>

了解如何更改SVG

4 个答案: