| Info |
|---|
Damit Logos und Grafiken vor dem Set-up bzw. im Rahmen einer Aktualisierung zur Laufzeit im korrekten Format (richtiger Dateityp, richtige Größe) angeliefert werden, finden sich nachfolgend wichtige Hinweise zu den im PEIQ PORTAL hinterlegten Logos und Grafiken. |
Inhaltsverzeichnis
| Expand | ||||
|---|---|---|---|---|
| ||||
|
Im PEIQ PORTAL integrierte Logos und Grafiken
Folgende Logos und Grafiken werden seitens PEIQ hinterlegt:
Grafik | Dateityp | Größe | Anmerkungen |
|---|---|---|---|
Logo |
| keine Einschränkungen | Aktuelles Logo als Vektor-Grafik (vektorbasiertes |
monochromes Logo |
| keine Einschränkungen | Dieses Logo wird beispielsweise beim Sticky-Header verwendet. Das Logo muss nicht zwangsläufig monochrom sein, sondern sollte im Kontrast zum Sticky-Header stehen. Bitte als Vektor-Grafik (vektorbasiertes |
Favicon |
| 16×16 oder 32×32 | Das Favicon ist ein sehr kleines Symbol bzw. Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL bzw. im Tab angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. |
Apple Touch Icons |
| In den folgenden Auflösungen:
| Touch Icons werden von gängigen Smartphones und Tablets genutzt, um Lesezeichen auf dem Homescreen darzustellen. Zudem nutzen gängige Browser das Touch Icons auf der Startseite des Browsers, um die regelmäßig besuchten Seiten des Nutzers anzubieten. |
Open Graph Logo |
| Best Practices siehe hier. | Das Open Graph Logo wird als Fallback verwendet, um auf Facebook geteilte Links zu Seiten zu bebildern, die über keine eigenen Bilder verfügen, wie beispielsweise die Startseite. Bei Beiträgen wird beispielsweise immer das erste Bild des Beitrags genutzt. |
AMP-Publisher-Logo |
| Höhe von 60px | Informationen und Hinweise zum AMP-Publisher-Logo finden sich hier. |
Segmentmarkierungen
|
...
|
...
Inhaltsverzeichnis
...
| title | Inhaltsverzeichnis anzeigen |
|---|
|
| keine Einschränkungen | Um eine optimale Darstellung des Logos auf allen Endgeräten zu gewährleisten, bindet PEIQ die Grafiken ausschließlich als |
SVG-Dateien überprüfen
Die SVGs müssen kundenseitig angeliefert werden. Hierbei ist auf einige Punkte zu achten. Nachfolgend werden einige nützliche Hinweise zum Umgang und zur Überprüfung von SVG-Dateien gegeben.
Damit beim Einsatz von SVG-Dateien alle Vorteile des Formats – wie z.B. die stufenlose Skalierung ohne Qualitätsverlust unabhängig von der Zeichengröße – zum Tragen kommen, müssen die Dateien bestimmte Rahmenbedingen erfüllen.
Das SVG muss vektorbasiert sein.
Das SVG darf keine eingebetteten Grafiken (meist in Form von base64-encodierten JPG oder PNG Daten) enthalten.
Das SVG darf keine verlinkten Grafiken enthalten.
Das SVG darf keinen
<style>CSS Block enthalten.
Bei SVG-Dateien handelt es sich um reguläre XML-Dateien, die mit nahezu jedem beliebigen Editor – wie z.B. Visual Studio Code oder Windows Notepad/Editor – ganz einfach gelesen werden können. Ein vektorbasiertes XML sieht beispielsweise folgendermaßen aus:
| Code Block |
|---|
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 212.6 42.5" style="enable-background:new 0 0 212.6 42.5;" xml:space="preserve">
<g>
<g>
<path style="fill:#C90130;" d="M53.8,12.3h3.4v18h-3.4V12.3z"/>
<path style="fill:#C90130;" d="M69.4,23.9c0,5.3-2.9,6.6-4.9,6.6c-3,0-4.9-2.4-4.9-6.5c0-4.6,2.4-6.6,4.9-6.6C67.6,17.4,69.4,19.9,69.4,23.9
z M63.1,23.9c0,2.2,0.3,4,1.6,4c1.1,0,1.4-2.1,1.4-4c0-1.7-0.3-4-1.4-4C63.4,20,63.1,22.2,63.1,23.9z"/>
<path style="fill:#C90130;" d="M75.3,23.2L75.3,23.2c0.3-0.7,0.5-1.2,0.7-1.8l1.6-3.8h3.7l-3.1,5.3l3.2,7.4h-3.8l-1.8-5.2l-0.6,1.1v4.1h-3.4
v-18h3.4L75.3,23.2L75.3,23.2z"/>
...
</g>
</g>
</svg>
|
| Note |
|---|
SVGs mit eingebetteten Grafiken lassen sich nicht verlustfrei in der Größe skalieren und darüber hinaus verbrauchen eingebettete Grafiken im Normalfall deutlich mehr Speicherplatz als reine Vektorinformationen. |
Enthält ein SVG eingebettete Grafiken sind in der Datei Blöcke zu finden, die beispielsweise folgendermaßen aussehen:
| Code Block |
|---|
<image style="overflow:visible;" width="156" height="165" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEN2Q3ZAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
EAMCAwYAAAREAAAGJQAACF3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAMUAxQMBIgACEQEDEQH/
xACtAAEAAQUBAAAAAAAAAAAAAAAAAQIDBAYHBQEBAAMBAQAAAAAAAAAAAAAAAAIDBQEEEAABAwID
CAICAgMAAAAAAAAAAQIDEQUQIDUwMRIyBBUGFjMUQBNQIWAlBxEAAQIEBQMCBQUBAAAAAAAAAwEC
AJKycyBAMdIEEZM0MDUhURKzZBBwcSKCdBIAAQMEAgIBBQAAAAAAAAAAAQAxAhAwkXIyMxEhUCBB
EiKC/9oADAMBAAIRAxEAAADoAGubHpUfTQ8JVqe68Ie68Ie68Ie68Ie68Ie68Ie68Ie68IbJuPNe
lWZ4T8QDSt10qHr18VbIAAAkBwABEw7l9K5r0qzLCzPAaVuulQ9evirZAAEgOEW3LqxU5dRKQGV0
rmvSrMwLM8BpW66VD16+KtkASA4ojGRuWrMd5kXcbJ4vzEpCHcvpXNelWZgWZ4DSt10qHr18VbJI
BxajERmxTShVNNwvZdrJTkJIHcvpXNelWZYWZ4DSt10qHr1+SrZEOTYjDRmxFKmUVI1ZNrNXXLgm
ISAy+lc16VZlhZngNK3XSoevwCKthjxhoTZilSRPa5uU5XLrmZRcWglAdAy+lc16VZlhZngNK3XS
...
|
Enthält ein SVG verlinkte Grafiken sind in der Datei Blöcke zu finden die beispielsweise folgendermaßen aussehen:
| Code Block |
|---|
<image style="overflow:visible;enable-background:new;" xlink:href="logo.png">
|
| Note |
|---|
Enthält ein SVG eingebette |
Daumenregel anhand der Dateigröße
Ohne sich den Inhalt der SVG-Datei selbst in einem Editor anzuzeigen, lässt sich oftmals schon anhand der Dateigröße sehen, ob es sich um ein gewünschtes vektorbasiertes SVG oder um ein unerwünschtes SVG mit eingebetteten oder verlinkten Grafiken handelt!
Liegt die Dateigröße zwischen einem und ~50 Kilobyte (KB) ist meist alles in Ordnung und es handelt sich um eine vektorbasierte Datei.
Beträgt die Dateigröße mehr als ~50 Kilobyte (KB) ist Vorsicht geboten.
Beträgt die Dateigröße nur ~1 Kilobyte (KB) kann auch eine verlinkte Grafik verwendet sein und es ist Vorsicht geboten.
Je nach Komplexität (oder eben nicht) des Motivs kann aber auch fälschlicherweise die ein oder andere Daumenregel greifen. Deswegen ist eine exakte Kontrolle unter Zuhilfenahme eines Editors unabdingbar.
SVG aus Adobe Illustrator exportieren
Um ein möglichst brauchbares SVG aus Adobe Illustrator zu exportieren, empfiehlt es sich folgende Einstellungen zu beachten.
Datei → Exportiereren → Exportieren als…
Dateityp: SVG (*.SVG) und Option Zeichenflächen verwenden
deaktivieren, wenn nur das Objekt selbst ohne Rand exportiert werden soll. Das ist üblicherweise die gewünschte Einstellung.
aktivieren, wenn die Zeichenfläche gewünscht ist, z.B. um einen Abstand um das eigentliche Element zu haben.
Stil: Inline-Format
Schrift: SVG
Bilder: Beibehalten
Objekt-IDs: Minimal
Dezimalstellen: 2
Minifizieren: AN
Responsiv: AN
...
Empfohlene SVG-Optionen für den Export aus Adobe Illustrator
Optimierung von SVG-Dateien
Abhängig vom Tool, mit dessen Hilfe die SVG-Datei erstellt wurde, sind in der Datei zusätzliche, meist überflüssige Informationen enthalten. Mit einem Tool wie beispielsweise SVGOMG! lassen sich diese (meist) verlustfrei entfernen.
Im Normalfall ist eine weitere Optimierung von SVG-Dateien nicht nötig, da sich diese aufgrund ihrer textbasierten Natur sehr gut komprimieren lassen (nginx gzip compression).
Responsive SVG-Dateien
Im Zusammenhang mit responsiven SVG-Dateien ist darauf hinzuweisen, dass eine verlustfreie Skalierung nicht automatisch zu einer guten Lesbarkeit des entsprechenden Motivs führt. Mittels Media-Queries kann ein SVG selbst responsiv bzw. adaptiv werden.
Linktipps:
Ein responsives SVG sieht dann beispielsweise folgendermaßen aus:
| Code Block |
|---|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="visibility:hidden;">
<style>
.large { visibility: hidden; }
.small { visibility: visible; }
@media screen and (min-width: 640px) {
.large { visibility: visible; }
.small { visibility: hidden; }
}
</style>
<symbol id="large" viewBox="0 0 446 26">
<rect x="217.98" y="0.001" width="22.516" height="22.516" style="fill:#e3dcd2;"/>
...
</symbol>
<symbol id="small" viewBox="0 0 265 52">
<rect x="0" y="0" width="265" height="52.016" style="fill:#fff;"/>
...
</symbol>
<svg class="large"><use xlink:href="#large" /></svg>
<svg class="small"><use xlink:href="#small" /></svg>
</svg> |
| Info |
|---|
Ggf. ist es auch hier sinnvoll die Klassen |
Verwandte Seiten
| Filter by label (Content by label) | ||||||
|---|---|---|---|---|---|---|
|
...