[improve] Code quality: strip Inkscape/RDF metadata from inline SVGs in HelloWorld.vue

[github-actions]

What

Remove the verbose Inkscape/sodipodi/RDF authoring metadata that is embedded inside the inline SVGs in HelloWorld.vue, and optionally extract those SVGs into dedicated component files.

Why

HelloWorld.vue is currently 373 KB / 1,274 lines, which is unusually large for a single Vue SFC. A significant portion of this bloat comes from SVG <metadata> blocks, sodipodi:* attributes, inkscape:* attributes, and RDF/CC/DC namespace declarations that Inkscape adds to files when saving – none of which have any effect on how the SVG renders in a browser.

Stripping this dead markup will:

• Shrink the component source file and improve developer readability.
• Reduce JavaScript bundle size – Vite inlines template strings, so larger templates → larger JS bundles.
• Speed up Vue template compilation at build time.

Rough estimate: at least ~81 lines of pure Inkscape/RDF noise across the SVGs (PDF icon, C-book cover, blog icon, and others).

How

1. For each inline <svg> that contains <metadata>, sodipodi:*, inkscape:*, xmlns:rdf, xmlns:cc, xmlns:dc attributes/elements:
   • Remove the <metadata>...</metadata> block entirely.
   • Remove <sodipodi:namedview> (if present).
   • Strip xmlns:sodipodi, xmlns:inkscape, xmlns:rdf, xmlns:cc, xmlns:dc, xmlns:svg namespace declarations from the root <svg> element.
   • Strip inkscape:* and sodipodi:* attributes from any descendant elements.
2. Optionally, extract each SVG into a src/assets/ file (e.g., pdf-icon.svg, c-book.svg) and import it with Vite's ?component or ?raw transform to keep HelloWorld.vue maintainable.
3. Run npm run build and npm run lint to verify nothing breaks.

Verification

• npm run build passes
• npm run lint passes
• All SVG icons still render correctly
• HelloWorld.vue file size is noticeably reduced
• No existing PR conflicts

Generated by Continuous Improvement — Portfolio Site · ● 7.9M · ◷