creating-svg-illustrations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SVG Illustrations

SVG插图

Start with
references/core-rules.md
; load only the extra detail the artifact needs.
NeedRead or use
Canvas, style, text, accessibility, validation
references/core-rules.md
Reusable compositions
references/pattern-examples.md
Marp embedding
references/embedding.md
Rendering failures
references/troubleshooting.md
Known-good deck example
assets/examples/with-diagrams.md
请从
references/core-rules.md
开始;仅加载制品所需的额外细节。
需求阅读或使用
画布、样式、文本、可访问性、验证
references/core-rules.md
可复用组合
references/pattern-examples.md
Marp嵌入
references/embedding.md
渲染故障
references/troubleshooting.md
优质示例幻灯片
assets/examples/with-diagrams.md

Workflow

工作流程

  1. Inspect the target slide or document, required dimensions, surrounding palette, and renderer.
  2. Create the smallest editable SVG that communicates the idea. Use a correct
    viewBox
    , explicit text styles, consistent geometry, and SVG title/description where the visual carries meaning. When embedding, also provide descriptive host-level alt text or an adjacent semantic equivalent as required by
    references/embedding.md
    ; internal SVG metadata alone is not sufficient.
  3. Keep assets portable: avoid embedded fonts, unexplained emoji, unnecessary filters, and base64 content unless the output must be self-contained.
  4. Validate with
    svglint
    when available, then open or embed the SVG in the target artifact and inspect clipping, scaling, contrast, text, and relative paths.
  5. Return the SVG artifact first, followed by validation performed and any renderer or font caveat.
Use slide-authoring or color guidance only when the request also requires it. Do not claim visual inspection when only source validation ran, and do not commit or publish the artifact unless requested.
  1. 检查目标幻灯片或文档、所需尺寸、周边配色方案及渲染器。
  2. 创建能传达核心概念的最小可编辑SVG。使用正确的
    viewBox
    、明确的文本样式、一致的几何图形,且当视觉内容承载含义时添加SVG标题/描述。嵌入时,还需根据
    references/embedding.md
    的要求提供描述性的宿主级替代文本或相邻的语义等效内容;仅靠SVG内部元数据是不够的。
  3. 保持资产可移植性:避免嵌入字体、未说明的表情符号、不必要的滤镜及base64内容,除非输出必须是自包含的。
  4. 若可用,使用
    svglint
    进行验证,然后在目标制品中打开或嵌入SVG,检查裁剪、缩放、对比度、文本及相对路径。
  5. 先返回SVG制品,随后附上已执行的验证操作以及任何渲染器或字体相关注意事项。
仅当请求同时需要时,才提供幻灯片创作或配色指导。若仅进行了源码验证,请勿声称已进行视觉检查;除非有要求,否则请勿提交或发布制品。