AiSvg

AI SVG 시각 자산 생성 — prompt builder + SVG 보안 정화

상태

항목	값
Layer	composite
Tier	L1
Status	wip
Version	0.9.0
가격	Free (free)
**카�
�고리**	Content

개요

개요

AiSvg 는 multi-saas-kit 의 Composite Plugin � 니다. LLM 으로 생성한 SVG 시각 자산을 콘� �츠에 안전하게 임베드하기 위한 표준 prompt builder 와 SVG sanitizer 를 제공합니다.

LLM 호출은 AiRelay 같은 프로젝트별 AI 어댑터가 담당합니다. AiSvg 는 prompt 구성과 결과 검증 의 Pure 경계를 맡으며, 학습 콘� �츠뿐 아니라 문서, 랜딩페이지, 도움말, 리포트 등 SVG 자산이 필요한 모든 콘� �츠 영역에서 사용할 수 있습니다.

핵심 컴포넌트

Enums

Enum	Cases	메서드
SvgVisualKind	CARTOON / PHOTO / DIAGRAM / ICON	visualHint()
StylePreset	FLAT / CARTOON / LINE / HAND_DRAWN	styleHint()

Kind/Style 별 시각 묘사 hint 를 prompt 에 자동 삽� 합니다.

PromptBuilder (Pure)

academy.how IllustrationGenerator::buildPrompt 에서 추출한 범용 prompt builder � 니다.

� 력: caption + kind + style + locale 출력: LLM 에 전달할 SVG 생성 prompt 문자열.

Prompt 에 자동 포함:

• Kind / Style 시각 hint
• viewBox (config 으로 변경 가능, default 0 0 480 320)
• Locale → <title> screen-reader 언어 매핑
• 대상 � 자/audience 지시
• 보안 제약 (script/event handler/external URL/data URL 금지)
• 크기 제약 (60 lines / 8KB)

SvgSanitizer (Pure)

LLM 이 생성한 SVG 의 안전성 + 형식 검증.

자동 처리:

• Markdown code fence 자동 제거
• <svg> 시작 + </svg> 끝 검증

보안 차단:

• 위험 태그: script, foreignObject, iframe, object, embed
• 이벤트 핸들러: onclick, onload, onmouseover, onerror 등
• 외부/inline URL payload: http:, https:, data:, javascript: href/xlink:href/style url()

결과 shape:

{
  ok: bool,
  svg: ?string,
  issues: ['forbidden_tag_script', 'size_exceeds_8192', ...],
  size_bytes: int,
  line_count: int,
}

Issue code 는 i18n 가능 — 호출자가 사용자에게 구체적 거부 사유 표시.

설정 (config/ai-svg.php)

return [
    'enabled' => env('PLG_AI_SVG_ENABLED', true),
    'audience' => 'general web content readers',
    'svg' => [
        'max_size_bytes' => 8192,
        'max_lines' => 60,
        'view_box' => '0 0 480 320',
    ],
    'forbidden' => [
        'tags' => ['script', 'foreignObject', 'iframe', 'object', 'embed'],
        'event_handlers' => ['onclick', 'onload', 'onmouseover', 'onerror', 'onfocus', 'onblur'],
        'block_external_images' => true,
        'forbidden_url_schemes' => ['http:', 'https:', 'data:', 'javascript:'],
    ],
];

사용 예시

use App\Plugins\AiSvg\Enums\{SvgVisualKind, StylePreset};
use App\Plugins\AiSvg\Services\{PromptBuilder, SvgSanitizer};

$prompt = PromptBuilder::fromConfig(config('ai-svg'))->build(
    caption: '햇살 아래 사과 한 개',
    kind: SvgVisualKind::CARTOON,
    style: StylePreset::FLAT,
    locale: app()->getLocale(),
);

$result = $aiClient->complete($prompt);
$sanitized = SvgSanitizer::fromConfig(config('ai-svg'))->sanitize($result['text']);

if (! $sanitized['ok']) {
    Log::warning('ai_svg_sanitize_failed', ['issues' => $sanitized['issues']]);
    return null;
}

$visualAsset->svg_content = $sanitized['svg'];
$visualAsset->save();

출처

academy.how 의 App\Modules\Content\Services\IllustrationGenerator (320줄) 에서 SVG prompt 생성과 검증 경계를 추출했습니다. LLM 호출 / Eloquent 저장 / AiRun 추적은 프로젝트 또는 AiRelay/AiTracking 조합의 � 임으로 분리합니다.

의존성

• DocumentProcessor — 생성된 SVG 를 Document 본문에 임베드
• AiRelay (선택) — LLM 호출 표준 어댑터
• AiTracking (선택) — 생성 이력 / 재시도 / 실패 로그

다음 단계

• 표준 AiSvgAsset Model + Migration (선택 활성)
• Filament Resource (운영자가 SVG 자산 검수 / 미리보기 / 재생성)
• Refine prompt builder (사용자 지시 + 첨부 이미지 기반 재생성)
• Caption → SVG 캐싱 (동일 caption 재사용)

라이선스

MIT

의존성

• DocumentProcessor

데모

• Platform 관리자 패널에서 메타 확인 🔒 로그인 필요
• 사용 예시 (PHP)

---

🛒 Plugin Store에서 보기: store.codebase.how/plugins/ai-svg