45 lines
2.4 KiB
XML
45 lines
2.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
|
|
<title id="title">WebSocket pros and cons</title>
|
|
<desc id="desc">A compact pros and cons diagram for WebSocket.</desc>
|
|
<defs>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Vazirmatn";
|
|
src: url("../../../app/static/Vazirmatn[wght].woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
}
|
|
text { font-family: "Vazirmatn", Arial, sans-serif; }
|
|
</style>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".12"/>
|
|
</filter>
|
|
</defs>
|
|
<rect width="960" height="540" fill="#262a3a"/>
|
|
<path d="M38 412 L244 320 L330 484 L96 548 Z" fill="#43d9a3" opacity=".12"/>
|
|
<path d="M720 34 L936 112 L828 236 L640 136 Z" fill="#fb7185" opacity=".12"/>
|
|
<g id="diagram-content-shift" transform="translate(0,-28)">
|
|
<g filter="url(#shadow)">
|
|
<rect x="92" y="154" width="350" height="286" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
<rect x="518" y="154" width="350" height="286" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
</g>
|
|
<text x="130" y="206" fill="#047857" font-size="25" font-weight="800">Pros</text>
|
|
<text x="158" y="256" fill="#f8fafc" font-size="17">Low latency</text>
|
|
<text x="158" y="304" fill="#f8fafc" font-size="17">Full-duplex</text>
|
|
<text x="158" y="352" fill="#f8fafc" font-size="17">Less HTTP overhead</text>
|
|
<text x="158" y="400" fill="#f8fafc" font-size="17">Good for Chat / Dashboard</text>
|
|
<circle cx="136" cy="250" r="7" fill="#10b981"/>
|
|
<circle cx="136" cy="298" r="7" fill="#10b981"/>
|
|
<circle cx="136" cy="346" r="7" fill="#10b981"/>
|
|
<circle cx="136" cy="394" r="7" fill="#10b981"/>
|
|
<text x="556" y="206" fill="#b42318" font-size="25" font-weight="800">Cons</text>
|
|
<text x="584" y="256" fill="#f8fafc" font-size="17">Server state</text>
|
|
<text x="584" y="304" fill="#f8fafc" font-size="17">Open socket memory</text>
|
|
<text x="584" y="352" fill="#f8fafc" font-size="17">Reconnect handling</text>
|
|
<text x="584" y="400" fill="#f8fafc" font-size="17">Scaling needs design</text>
|
|
<circle cx="562" cy="250" r="7" fill="#ef4444"/>
|
|
<circle cx="562" cy="298" r="7" fill="#ef4444"/>
|
|
<circle cx="562" cy="346" r="7" fill="#ef4444"/>
|
|
<circle cx="562" cy="394" r="7" fill="#ef4444"/>
|
|
</g>
|
|
</svg>
|