关于社区图标的全部内容

我没有采用VS的形象“树+齿轮”的图标,而是根据颜色方块设计了V字型图标,下面是可以调用在其他地方的svg代码:

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="200" width="200" height="200" fill="#6b8e23"/>
  <rect x="500" y="200" width="200" height="200" fill="#8b5a2b"/>
  <rect x="300" y="400" width="200" height="200" fill="#555"/>
</svg>

<svg viewBox="0 0 700 120" xmlns="http://www.w3.org/2000/svg">
  <!-- ===== V 图标 ===== -->
  <rect x="40" y="24" width="36" height="36" fill="#6b8e23"/>
  <rect x="112" y="24" width="36" height="36" fill="#8b5a2b"/>
  <rect x="76" y="60" width="36" height="36" fill="#555"/>

  <!-- ===== 文字(70%高度) ===== -->
  <text x="170" y="78"
        font-size="50"
        font-family="Inter, Arial, Helvetica, sans-serif"
        font-weight="600"
        letter-spacing="0.5"
        fill="#222">
    Vintage Story Forum
  </text>
</svg>

绿色代表草地、褐色代表土块、灰色代表石块,可能不准确,不过确实是这个意思。

其他修改操作

添加白色背景:

  <rect x="0" y="0" width="800" height="800" fill="#ffffff"/>

添加圆角:

<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="233" width="200" height="200" rx="12" fill="#6b8e23"/>
  <rect x="500" y="233" width="200" height="200" rx="12" fill="#8b5a2b"/>
  <rect x="300" y="433" width="200" height="200" rx="12" fill="#555"/>
</svg>
2 个赞

苦力怕.png

1 个赞