[svg]修改svg图标/大小/颜色

/ 7评论 / 2445阅读 / 2点赞

svg

svg 和我们常见的 jpg / png 一样是图片的存储格式。但svg是矢量图,jpg / png 是位图。由于这些概念并不影响本文的主题(修改svg的内容/大小等操作),故概念介绍请见本文末尾。


修改svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#66ccff">
    <path
d="M20.492,7.969,10.954.975A5,5,0,0,0,3,5.005V19a4.994,4.994,0,0,0,7.954,4.03l9.538-6.994a5,5,0,0,0,0-8.062Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
    <path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z"/>
    <path d="M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
    <path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5,
   M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
    <path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z,
   M15.449,12.815,13.5,14.731V6.5a1.5,1.5,0,0,0-3,0v8.231L8.551,12.815a1.5,1.5,0,1,0-2.1,2.14L9.55,18a3.524,3.524,0,0,0,4.9,0l3.1-3.048a1.5,1.5,0,1,0-2.1-2.14Z"/>

相关概念

图片的表示方法主要有矢量方式和位图方式,下面我们来看看它们的差别。

矢量图

位图

  1. MargaritaZ说道:

    I was studying some of your content on this internet site and I believe
    this internet site is really informative! Retain posting.Raise range

  2. Możesz także dostosować monitorowanie dla niektórych aplikacji i natychmiast rozpocznie regularne przechwytywanie migawek ekranu telefonu.

  3. ulNxNymJ说道:

    buy cialis 5mg daily use The 3rd cycle we did all Menopur and was also able to try for an IUI

  4. escanty说道:

    Two to three years of hormone replacement treatment in healthy women have long term preventive effects on bone mass and osteoporotic fractures the PERF study viagra without prescription Many drugs besides fluvoxamine may affect the heart rhythm QT prolongation, including pimozide, thioridazine, among others

  5. Clollag说道:

    022 were significantly more prevalent in the case group, compared to the control group priligy pill

  6. Coikemn说道:

    These included progression free health state PFS, locoregional recurrence LR, contralateral breast cancer CLB, distant metastasis DM, endometrial cancer, thromboembolic event, death resulting from breast cancer and all cause mortality accutane safe

  7. Best online game https://legacy-of-dead-online.com/ where you can make money, buy your wife a new phone or a car, close your mortgage on your apartment and just two months, urgently register and win.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注