> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/svg/examples/3-circles.md).

# 3 circles

\
​​💾 <https://replit.com/@pegasusroe/svg-3-circles>

{% tabs %}
{% tab title="circles.svg" %}
![](https://448dffa5-d795-41f8-adb5-ed2e1614d96f.id.repl.co/circles.svg)

```markup
<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <title>3 circles</title>
    <circle cx="100" cy="100" r="25" fill="red"></circle>
    <circle cx="200" cy="100" r="25" fill="green"></circle>
    <circle cx="300" cy="100" r="25" fill="blue"></circle>
</svg>
```

{% hint style="danger" %}

* 使用獨立的 .svg 檔時，好像一定要註明：\
  &#x20;**xmlns="<http://www.w3.org/2000/svg>"** \
  否則 GitBook 似乎無法順利載入 SVG 圖檔。<br>
* CSS 的設定似乎對獨立的 SVG 檔無用 :exclamation:&#x20;
  {% endhint %}
  {% endtab %}

{% tab title="index.html" %}

```markup
<!-- inline SVG -->
<svg id="c1" viewBox="0 0 400 200">
        <circle cx="100" cy="100" r="25" class="first"></circle>
        <circle cx="200" cy="100" r="25" class="second"></circle>
        <circle cx="300" cy="100" r="25" class="third"></circle>
</svg>

<!-- inline SVG -->
<svg viewBox="0 0 400 200" id="c2">
        <circle cx="112" cy="112" r="25" class="overlap"></circle>
        <circle cx="100" cy="100" r="25" class="first"></circle>
        <circle cx="200" cy="100" r="25" class="second"></circle>
        <circle cx="300" cy="100" r="25" class="third"></circle>
</svg>

<!-- SVG img -->
<img src="flex-direction.svg" alt="flex-direction">
<img src="circles.svg" alt="circles">
```

{% endtab %}

{% tab title="css" %}

```css
body {
    background-color: gray;
}

/* styles for SVG */
svg {
    border: 1px solid black;
}

circle { 
    fill: rgba(255,0,0,1); 
    stroke: black;
}

#c2 {
    width: 50vw;
    background-color: #ccc;
}

.first { 
    opacity: .75; 
}

.overlap {
    fill: rgba(0, 0, 200, .75);
}

.second { 
    stroke-width: 3px; 
}

.third { 
    fill: rgba(0,200,0,.75);
}
```

{% endtab %}
{% endtabs %}