Ein funktionierender SVG -Workflow für zugängliche Symbole

Die Verwendung von Icon -Schriftarten wird im Allgemeinen aufgrund von Inkonsistenzen, Zugänglichkeitsproblemen und semantischen Einschränkungen entmutigt. Dieser Artikel beschreibt einen optimierten Workflow zum Erstellen und Implementieren von SVG -Symbolen, die die Leistung von SVG -Sprites nutzen.

Während SVGs komplex erscheinen mögen, vereinfacht dieser Ansatz den Prozess. Wir werden leicht verfügbare Symbole verwenden und die Sprite -Generation für ein effizientes Management automatisieren.

Schlüsselvorteile:

• vermeidet die Fallstricke von Icon -Schriftarten.
• vereinfacht das SVG -Management mit automatisierter Sprite -Generierung.
• bietet eine leicht wiederverwendbare Symbolkomponente.
• priorisiert die Zugänglichkeit durch die Verwendung von <title></title> und <desc></desc> -Tags.

Workflow -Übersicht:

1. Quellsymbole: SVG -Symbole (z. B. aus Icomoon) erfassen. Reinigen Sie die SVG -Dateien und entfernen Sie unnötige Metadaten, um die Sprite -Größe zu minimieren.
2. Sprite -Generierung: Verwenden Sie ein Tool wie spritesh (installierbar über NPM: npm install spritesh -g), um ein SVG -Sprite aus Ihren individuellen Symboldateien zu generieren. Dadurch werden alle Symbole in eine einzelne Datei zum effizienten Laden zusammengefasst. Ein Beispielbefehl: spritesh --input assets/images/icons --output _includes/sprite.svg --viewbox "0 0 16 16" --prefix icon-
3. Sprite -Einschluss: Fügen Sie das erzeugte Sprite in Ihr Hauptlayout ein (z. B. mit {% include sprite.svg %} in Jekyll).
4. Symbolkomponente: Erstellen Sie eine wiederverwendbare Komponente (z. B. eine Jekyll -Komponente oder Reaktionskomponente) mit dem <use></use> -Tag zu Referenz -Symbole aus dem Sprite. Diese Komponente sollte eine einfache Anpassung von Klassen, viewBox und Barrierefreiheitattributen ermöglichen.
5. Barrierefreiheit: Die Symbolkomponente sollte <title></title> und <desc></desc> Tags enthalten, um einen Kontext für Bildschirmleser bereitzustellen und die Zugänglichkeit zu verbessern. Diese Beschreibungen sollten kontextspezifisch sein, dynamisch auf der Verwendung des Symbols hinzugefügt.

Beispielsymbolkomponente (Jekyll):

{% capture id %}{% increment uniqueid %}{% endcapture %}
<svg viewBox="0 0 16 16" role="img" class="icon icon-{{ include.icon }}" aria-labelledby="{% if include.title %}title-{{ id }}{% endif %}{% if include.desc %} desc-{{ id }}{% endif %}">
  {% if include.title %}
  <title id="title-{{ id }}">{{ include.title }}</title>
  {% endif %}
  {% if include.desc %}
  <desc id="desc-{{ id }}">{{ include.desc }}</desc>
  {% endif %}
  <use xlink:href="#icon-{{ include.icon }}"></use>
</svg>

Beispielsymbolkomponente (React):

import { uniqueId } from 'lodash';

const Icon = (props) => {
  const id = uniqueId();
  return (
    <svg role="img" viewBox="0 0 16 16" className={`icon icon-${props.icon}`} aria-labelledby={
      (props.title ? `title-${id}` : '') +
      (props.desc ? ` desc-${id}` : '')
    }>
      {props.title && <title id={`title-${id}`}>{props.title}</title>}
      {props.desc && <desc id={`desc-${id}`}>{props.desc}</desc>}
      <use xlinkHref={`#icon-${props.icon}`} />
    </svg>
  );
};

export default Icon;

Optimierung: Integrieren Sie Tools wie SVGO (npm install svgo), um SVG -Dateien vor der Sprite -Generierung für eine verbesserte Leistung zu optimieren. Verwenden Sie NPM -Skripte, um diesen Vorgang zu automatisieren.

Dieser Workflow bietet eine robuste, wartbare und zugängliche Lösung für die Verwaltung von SVG -Symbolen in Ihren Projekten. Denken Sie daran, Ihre Symbole immer über verschiedene Browser und Bildschirmleser zu testen, um eine optimale Zugänglichkeit zu gewährleisten.

Das obige ist der detaillierte Inhalt vonEin funktionierender SVG -Workflow für zugängliche Symbole. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!