Convert SVG to MediaWiki

Why Convert SVG to MediaWiki?

Converting SVG to MediaWiki markup enables you to document vector graphic content directly in wiki-based knowledge management systems. MediaWiki powers Wikipedia and thousands of corporate and community wikis, making this conversion valuable for creating encyclopedic documentation of graphic assets, design specifications, and technical diagrams.

SVG files contain structured data including text labels, element descriptions, and metadata that are valuable for wiki documentation. By converting to MediaWiki format, this content becomes part of a searchable, cross-linked knowledge base where it can be categorized, referenced from other articles, and collaboratively maintained by teams.

This conversion is especially useful for organizations that maintain internal wikis for design systems, icon libraries, or technical documentation. Each SVG graphic can have a corresponding wiki page that describes its content, usage guidelines, and technical specifications in a format that supports MediaWiki's powerful template and category systems.

Our converter parses SVG elements, extracts text content and attributes, and generates MediaWiki markup with proper headings, tables, lists, and formatting that can be directly pasted into any MediaWiki-based wiki.

Key Benefits of Converting SVG to MediaWiki:

• Wiki Integration: Content ready for Wikipedia-style documentation systems
• Collaborative Editing: Multiple users can maintain graphic descriptions
• Category Support: Organize SVG documentation with wiki categories
• Cross-Linking: Link to related wiki pages and references
• Template Compatible: Works with MediaWiki template systems
• Revision History: Track all documentation changes automatically

Practical Examples

Example 1: Icon Documentation

Input SVG file (settings-icon.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="24" height="24" viewBox="0 0 24 24">
  <title>Settings Icon</title>
  <circle cx="12" cy="12" r="3"
          fill="none" stroke="#333"/>
  <path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83"
        stroke="#333"/>
</svg>

Output MediaWiki file (settings-icon.mediawiki):

== Settings Icon ==

=== Specifications ===

{| class="wikitable"
|-
! Property !! Value
|-
| Width || 24
|-
| Height || 24
|-
| ViewBox || 0 0 24 24
|-
| Elements || 2
|}

=== Elements ===

* '''circle''' — center (12, 12), radius 3, stroke #333
* '''path''' — gear outline with rays, stroke #333

Example 2: Diagram Wiki Page

Input SVG file (workflow.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="150">
  <title>Approval Workflow</title>
  <desc>Document approval process</desc>
  <rect x="20" y="50" width="100" height="40"
        fill="#3498db" rx="5"/>
  <text x="70" y="75"
        text-anchor="middle" fill="white">Submit</text>
  <rect x="160" y="50" width="100" height="40"
        fill="#f39c12" rx="5"/>
  <text x="210" y="75"
        text-anchor="middle" fill="white">Review</text>
  <rect x="300" y="50" width="100" height="40"
        fill="#27ae60" rx="5"/>
  <text x="350" y="75"
        text-anchor="middle" fill="white">Approve</text>
</svg>

Output MediaWiki file (workflow.mediawiki):

== Approval Workflow ==

''Document approval process''

=== Workflow Steps ===

# '''Submit''' — step at (20, 50), fill #3498db
# '''Review''' — step at (160, 50), fill #f39c12
# '''Approve''' — step at (300, 50), fill #27ae60

=== Document Info ===

{| class="wikitable"
|-
! Property !! Value
|-
| Dimensions || 400 x 150
|-
| Steps || 3
|-
| Description || Document approval process
|}

Example 3: Design System Colors

Input SVG file (palette.svg):

<svg xmlns="http://www.w3.org/2000/svg"
     width="250" height="50">
  <title>Brand Color Palette</title>
  <rect x="0" y="0" width="50" height="50"
        fill="#2c3e50"/>
  <rect x="50" y="0" width="50" height="50"
        fill="#3498db"/>
  <rect x="100" y="0" width="50" height="50"
        fill="#2ecc71"/>
  <rect x="150" y="0" width="50" height="50"
        fill="#e74c3c"/>
  <rect x="200" y="0" width="50" height="50"
        fill="#f39c12"/>
</svg>

Output MediaWiki file (palette.mediawiki):

== Brand Color Palette ==

=== Colors ===

{| class="wikitable"
|-
! Swatch !! Color Code !! Position
|-
| 1 || #2c3e50 || x=0
|-
| 2 || #3498db || x=50
|-
| 3 || #2ecc71 || x=100
|-
| 4 || #e74c3c || x=150
|-
| 5 || #f39c12 || x=200
|}

Frequently Asked Questions (FAQ)

Q: What is SVG format?

A: SVG (Scalable Vector Graphics) is an XML-based vector image format standardized by the W3C. It uses XML elements to define shapes, paths, text, and other graphical objects. SVG files are plain text, resolution-independent, and natively supported by all modern web browsers. They are commonly used for icons, logos, illustrations, and interactive web graphics.

Q: What is MediaWiki markup?

A: MediaWiki markup is the wiki syntax used by Wikipedia and wikis running the MediaWiki software. It uses == for headings, ''' for bold, '' for italic, [[ ]] for internal links, and {| |} for tables. It supports templates, categories, transclusion, and complex page formatting for collaborative documentation.

Q: Can I paste the output directly into Wikipedia?

A: The output uses valid MediaWiki markup syntax and can be pasted into any MediaWiki-based wiki, including Wikipedia. However, Wikipedia has specific content guidelines (notability, verifiability, neutral point of view) that the content would need to meet for inclusion in an article.

Q: How are SVG tables converted to MediaWiki tables?

A: Element attributes and metadata are organized into MediaWiki table syntax using {| class="wikitable" ... |}. Column headers use !! separators, and data rows use || separators. The output uses the standard wikitable class for consistent formatting across MediaWiki installations.

Q: Does the output support MediaWiki templates?

A: The output uses standard MediaWiki syntax that is compatible with templates. You can add template calls after conversion to include infoboxes, navigation boxes, or other wiki templates. The generated markup integrates seamlessly with MediaWiki's template system.

Q: Can I add wiki categories to the output?

A: Yes, after conversion you can add category tags at the bottom of the MediaWiki page using [[Category:SVG Graphics]] syntax. This allows you to organize SVG documentation within your wiki's category hierarchy for easy browsing and discovery.

Q: How are SVG text elements formatted in MediaWiki?

A: SVG text content is extracted and formatted using MediaWiki bold (''') syntax for element names and standard text for descriptions. Text elements become list items or table entries, making the content easy to read and edit within the wiki interface.

Q: Will the output work with Fandom wikis?

A: Yes, Fandom (formerly Wikia) uses MediaWiki as its underlying engine. The generated markup is fully compatible with Fandom wikis and any other MediaWiki-based platform, including self-hosted installations and Miraheze wikis.