# ∅mniPantoglyph SVG Symbols - Usage Instructions

## How to Use in HTML

### Method 1: Direct SVG Embedding
<!-- Full-color version -->
<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- Paste the entire SVG code here -->
</svg>

<!-- Monochrome version -->
<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- Paste the entire monochrome SVG code here -->
</svg>

### Method 2: Using IMG Tag
<!-- Full-color version -->
<img src="∅mniPantoglyph.svg" alt="∅mniPantoglyph Symbol" width="200" height="200">

<!-- Monochrome version -->
<img src="∅mniPantoglyph-monochrome.svg" alt="∅mniPantoglyph Monochrome Symbol" width="200" height="200">

### Method 3: Using CSS Background
.omni-symbol {
    background-image: url('∅mniPantoglyph.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}

## Scaling and Sizing
SVG symbols are vector-based and can be scaled to any size without quality loss:

<!-- Small icon -->
<img src="∅mniPantoglyph.svg" alt="" width="32" height="32">

<!-- Medium size -->
<img src="∅mniPantoglyph.svg" alt="" width="100" height="100">

<!-- Large display -->
<img src="∅mniPantoglyph.svg" alt="" width="400" height="400">

## Customization

### Changing Colors (for embedded SVG)
When embedding SVG code directly, you can modify colors:

<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- Change stroke and fill to your preferred color -->
    <circle cx="100" cy="100" r="60" fill="none" stroke="#ff0000" stroke-width="10"/>
    <!-- ... rest of SVG elements with updated colors -->
</svg>

### CSS Styling
For embedded SVG, you can apply CSS:

.omni-symbol svg {
    filter: drop-shadow(0 0 10px rgba(155, 89, 182, 0.7));
    transition: transform 0.3s ease;
}

.omni-symbol svg:hover {
    transform: scale(1.1);
}

## Best Practices
- Accessibility: Always include alt text for img tags
- Performance: Use SVG sprites for multiple instances
- SEO: Include relevant meta descriptions when using as prominent visual elements
- Consistency: Maintain aspect ratio when resizing

## File Structure Recommendation
project/
├── index.html
├── css/
│   └── style.css
└── assets/
    ├── ∅mniPantoglyph.svg
    └── ∅mniPantoglyph-monochrome.svg

## Browser Support
- Chrome: ✅ Full support
- Firefox: ✅ Full support
- Safari: ✅ Full support
- Edge: ✅ Full support
- IE: ⚠️ Limited support (use PNG fallback if needed)

## License Information
- License: Creative Commons Attribution 4.0 International (CC BY 4.0)
- Copyright: © 2025 ∅mniPantoglyph Community
- Author: Evan Vortepov
- ID: 0ff496d4b2788de9c8735df3ab4d4ea251348ca1d76dd15058ce49d7959ae1a8