SVG-Logo ausschneiden und einbinden

Ein Kirby-Template mit einem Logo versehen.

Das Starterkit-Template seit Kirby 2 ist erfreulicherweise responsive und sieht schlicht und elegant aus. Das Logo ist als SVG-Datei umgesetzt. Bisher hatte ich nur Erfahrung mit Bitmap-Logos. Wer jedoch das responsive Design voll ausschöpfen möchte, sollte ebenfalls ein SVG-Logo einsetzen. Hier erfolgt keine Anleitung, wie ein Logo in Inkscape erstellt werden kann. Wenn es aber erstellt ist, muss es in seiner Größe exportiert werden.

Logo ausschneiden

Mein erstes SVG-Logo war im Starterkit-Template gerade mal stecknadelgroß. Ich hatte wie immer die gesammte Datei in A4-Größe abgespeichert. Es gilt jedoch, das Logo korrekt auszuschneiden.

Gruppieren Sie ggf. die Elemente zu einem Objekt und markieren Sie es. Klicken Sie anschließend auf die unten gezeigte Schaltfläche.

logo-inkscape2
Unterste Symbolschaltfläche rechts

Im Fenster Dokumenteneinstellungen klicken Sie auf Seite in Auswahl einpassen.

logo-inkscape3
Seitengröße benutzerdefiniert

Einbinden in der header.php

Im Header-Snippet steht bei mir nun:

<header class="header cf" role="banner">
<a class="logo" href="<?php echo url() ?>">Ditalog</a>
<?php snippet('menu') ?>
</header>

CSS-Klasse

Meine SVG-Logodatei heißt logo.svg. Die Klasse .logo in der main.css sieht so aus:

.logo {
display: inline-block;
padding: .21em 0 1em 1.5em;
font-size: 2.75rem;
z-index: 999;
text-transform: lowercase;
background: url(../images/logo.svg) no-repeat left top;
background-size: 1.25em;
}

Ads