全部技能 分类浏览
← 返回
数据分析 中文

SVG

Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.
使用适当的 viewBox、无障碍性和 CSS 样式创建并优化 SVG 图形。
ivangdavila
数据分析 clawhub v1.1.0 1 版本 99945.2 Key: 无需
★ 2
Stars
📥 1,784
下载
💾 81
安装
1
版本
#latest

概述

Quick Reference

TopicFileKey Trap
-----------------------
viewBox & Scalingviewbox.mdMissing viewBox = no scaling
Screen Readersaccessibility.mdrole="img" + title as first child
SVGO Configoptimization.mdDefault removes viewBox/title
Inline vs imgembedding.md cannot be styled with CSS
currentColorstyling.mdHardcoded fills block theming

Critical Defaults

<!-- Minimum viable SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>

Common Mistakes Checklist

  • [ ] viewBox present (not just width/height)
  • [ ] Coordinates within viewBox bounds
  • [ ] No hardcoded fill="#000" if theming needed
  • [ ] role="img" + </code> for informative SVGs</li><li>[ ] <code>aria-hidden="true"</code> for decorative SVGs</li><li>[ ] Unique IDs across all inline SVGs on page</li><li>[ ] xmlns included for external <code>.svg</code> files</li></ul><h2>Memory Storage</h2><p>User preferences persist in <code>~/svg/memory.md</code>. Create on first use.</p><pre><code>## User Preferences <!-- SVG workflow defaults. Format: "setting: value" --> <!-- Examples: default_viewbox: 0 0 24 24, prefer_inline: true --> ## Accessibility Mode <!-- informative | decorative --> ## Optimization <!-- Tool and settings. Format: "tool: setting" --> <!-- Examples: svgo: preset-default, remove_metadata: true --> ## Icon Defaults <!-- Fill and sizing preferences --> <!-- Examples: fill: currentColor, default_size: 24x24 --> </code></pre><p><em>Empty sections = use skill defaults. Learns user preferences over time.</em></p></div> </div> </div> <div id="tab-versions" class="detail-content"> <div class="detail-section"> <h2>版本历史</h2> <p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p> <ul class="version-list"> <li> <div> <span class="version-tag">v1.1.0</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-03-28 23:00 安全 安全 </div> </li> </ul> </div> </div> <div id="tab-security" class="detail-content"> <div class="detail-section"> <h2>安全检测</h2> <div class="sec-grid"> <div class="sec-card"> <h4>腾讯云安全 (Keen)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://tix.qq.com/search/skill?keyword=fd385744f9a7124df777caedfc4cd28e" target="_blank">查看报告</a> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-safe"> 安全，无风险 </div> <a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/25/394704_244bd2ba5ed2a983c04af29283a6bb6b.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781385039%3B1812921039&q-key-time=1781385039%3B1812921039&q-header-list=host&q-url-param-list=&q-signature=3b129dd434b279502d50535a2c06540598ea40dc" target="_blank">查看报告</a> </div> </div> </div> </div> <!-- Recommended Skills --> <div style="margin-top:24px;"> <h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2> <div class="rec-grid"> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">ai-intelligence</span> <h3><a href="/s/self-improving">Self-Improving + Proactive Agent</a></h3> <div class="rec-owner">ivangdavila</div> <div class="rec-desc">自我反思+自我批评+自我学习+自组织记忆。智能体评估自身工作、发现错误并持续改进。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 1,362</span> <span style="color:#5b6abf;">📥 318,826</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">productivity</span> <h3><a href="/s/word-docx">Word / DOCX</a></h3> <div class="rec-owner">ivangdavila</div> <div class="rec-desc">创建、检查和编辑 Microsoft Word 文档及 DOCX 文件，支持样式、编号、修订记录、表格、分节符及兼容性检查等功能。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 440</span> <span style="color:#5b6abf;">📥 147,917</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">data-analysis</span> <h3><a href="/s/akshare-stock">A股量化 AkShare</a></h3> <div class="rec-owner">mbpz</div> <div class="rec-desc">A股量化数据分析工具，基于AkShare库获取A股行情、财务数据、板块信息等。用于回答关于A股股票查询、行情数据、财务分析、选股等问题。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 166</span> <span style="color:#5b6abf;">📥 60,181</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('.detail-tab').forEach(function(btn){ btn.addEventListener('click',function(e){ var tab = this.getAttribute('data-tab'); document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')}); document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')}); this.classList.add('active'); var el = document.getElementById('tab-'+tab); if(el) el.classList.add('active'); }); }); }); </script> <div class="footer"> <p>Skill工具集 © 2026</p> </div></body> </html>