[3.3] Eigenes Logo funktioniert nicht (erledigt)

[Dr.Death]

Die "Arbeitsfläche" des SVG ist immer noch zu groß.....

Du solltest es auch als "responsive" abspeichern, dann kann die Größe variieren.


Hier mal der Inhalt eines angepassten SVN Logos für dich:

Den Code per Cut&paste in eine Textdatei kopieren und als site_logo.svg abspeichern.

Code: Alles auswählen

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Vectornator for iOS (http://vectornator.io/) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" version="1.1" viewBox="0 0 153 114">
<defs/>
<g id="Ebene_1_1_">
<path d="M98.9117+55.8708L94.0723+55.8708L101.924+40.2243L132.554+40.2243L144.089+55.8708L128.774+68.7413L137.98+86.4067L120.393+86.4067L113.522+75.1135L111.744+86.4067L93.8972+86.4067L98.9117+55.8708ZM116.15+53.4734L114.483+61.5066L124.224+53.7676L116.15+53.4734Z" opacity="1" fill="#ffffff"/>
<path d="M17.1972+40.2243L36.8701+40.2243L35.0064+50.2002L42.7923+40.2243L80.5803+40.2243L75.8303+71.265L96.2844+71.265L92.2152+86.4067L36.4003+86.4067L30.1524+75.145L28.1018+86.4067L11.0561+86.5014L16.1931+55.8708L10.9279+55.8708L17.1972+40.2243ZM55.4753+83.2996L60.703+55.3661L56.7354+55.3661L59.7498+48.0082L46.1086+64.4512L55.4753+83.2996Z" opacity="1" fill="#ffffff"/>
<path d="M19.0768+42.7479L15.328+52.5901L19.643+52.5901L14.4563+83.6308L25.5385+83.6308L28.7851+66.5962L38.5255+83.6308L52.9013+83.6308L43.0807+63.7256L60.3027+42.7479L44.3943+42.7479L30.5002+60.2667L33.4164+42.7479L19.0768+42.7479Z" opacity="1" fill="#003e61"/>
<path d="M89.8975+83.7569L92.6104+73.7886L72.4461+73.7886L77.327+42.7479L64.7937+42.7479L60.7433+52.5192L64.0032+52.5058L58.1772+83.6308" opacity="1" fill="#003e61"/>
<path d="M122.494+83.8831L113.287+68.489L111.664+68.489L109.122+83.8831L97.2458+83.8831L102.394+52.5901L98.8051+52.5901L103.782+42.7479L131.006+42.7479L140.324+54.956L125.057+67.6809L133.756+83.8831C133.756+83.8831+122.494+83.8831+122.494+83.8831ZM114.996+60.8338L123.455+53.8519L116.278+53.8519L114.996+60.8338Z" opacity="1" fill="#003e61"/>
<path d="M112.817+64.4512L115.167+52.5901L127.257+52.5901L112.817+64.4512ZM117.041+57.6373L119.321+55.8708L117.303+55.8708" opacity="1" fill="#ffffff"/>
</g>
</svg>

[wernerz]

Hallo Jungs,

toll, beide Dateien funktionieren jetzt.
Kann mir einer erklären, was Ihr da gemacht habt? oder kann man das irgendwo nachlesen (ohne jetzt einen 3 Monatigen Lehrgang machen zu müssen)

Habe ja noch mehr Foren, wo ich vor dem gleichen Problem stehe. Da muss ich ja auch die Logos anpassen.

Ach und ist das jetzt responsive abgespeichert? oder muss ich da noch was machen?

[Dr.Death]

Das hat was mit SVG generell zu tun.

Die passenden SVG Bearbeitungsprogramme vorausgesetzt kann man viel machen.

Dein altes Logo hatte eine "feste" Höhe undBreite vorgeben:

Code: Alles auswählen

<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"
	 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

Das "neue" Logo ist jetzt "repsonsive", da die Größenangaben relativ sind:

Code: Alles auswählen

<svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" version="1.1" viewBox="0 0 153 114">
<defs/>

Lesestoff zu SVG:
https://de.wikipedia.org/wiki/Scalable_Vector_Graphics

[wernerz]

Danke, hier lernt man auch immer wieder was dazu.
Habe jetzt mal noch die Buchstaben eingefärbt, da versteht man gleich etwas mehr.

Aber eine abschließende Frage habe ich noch:
Das Logo hängt im Augenblick unterhalb vom Text. Kann man das einstellen, dass die Oberkante des Logo zum rechts stehenden Text bündig ist?

[Dr.Death]

Eine auf 60px angepasste SVG Version:

Code: Alles auswählen

<?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 height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" xmlns:vectornator="http://vectornator.io" version="1.1" viewBox="0 0 153 60">
<defs/>
<g id="Ebene_1_1_">
<path d="M97.6578+22.3609L92.8184+22.3609L100.67+6.71444L131.3+6.71444L142.835+22.3609L127.52+35.2314L136.726+52.8968L119.139+52.8968L112.268+41.6036L110.49+52.8968L92.6433+52.8968L97.6578+22.3609ZM114.896+19.9635L113.229+27.9967L122.97+20.2577L114.896+19.9635Z" fill-rule="evenodd" fill="#ffffff" opacity="1"/>
<path d="M15.9433+6.71444L35.6162+6.71444L33.7525+16.6903L41.5384+6.71444L79.3264+6.71444L74.5764+37.7551L95.0305+37.7551L90.9613+52.8968L35.1464+52.8968L28.8985+41.6351L26.8479+52.8968L9.80221+52.9915L14.9392+22.3609L9.67401+22.3609L15.9433+6.71444ZM54.2214+49.7897L59.4491+21.8562L55.4815+21.8562L58.4959+14.4983L44.8547+30.9413L54.2214+49.7897Z" fill-rule="evenodd" fill="#ffffff" opacity="1"/>
<path d="M17.8229+9.23804L14.0741+19.0802L18.3891+19.0802L13.2024+50.1209L24.2846+50.1209L27.5312+33.0863L37.2716+50.1209L51.6474+50.1209L41.8268+30.2157L59.0488+9.23804L43.1404+9.23804L29.2463+26.7568L32.1625+9.23804L17.8229+9.23804Z" fill-rule="evenodd" fill="#003e61" opacity="1"/>
<path d="M88.6436+50.247L91.3565+40.2787L71.1922+40.2787L76.0731+9.23804L63.5398+9.23804L59.4894+19.0093L62.7493+18.9959L56.9233+50.1209" fill-rule="evenodd" fill="#0a8f00" opacity="1"/>
<path d="M121.24+50.3732L112.033+34.9791L110.41+34.9791L107.868+50.3732L95.9919+50.3732L101.14+19.0802L97.5512+19.0802L102.528+9.23804L129.752+9.23804L139.07+21.4461L123.803+34.171L132.502+50.3732L121.24+50.3732ZM113.742+27.3239L122.201+20.342L115.024+20.342L113.742+27.3239Z" fill-rule="evenodd" fill="#c31c27" opacity="1"/>
<path d="M111.563+30.9413L113.913+19.0802L126.003+19.0802L111.563+30.9413ZM115.787+24.1274L118.067+22.3609L116.049+22.3609" fill-rule="evenodd" fill="#ffffff" opacity="1"/>
</g>
</svg>

Und dann mit der Höhen Werten in der Datei:
styles/prosilver/theme/common.css
herumspielen bis es passt:

Code: Alles auswählen

.site_logo {
	background-repeat: no-repeat;
	display: inline-block;
	width: 153px;
	height: 60px;
}

[wernerz]

Hat Super funktioniert, Danke.

[SL113]

Hallo Dr.Death,
so wie ich den Thread verstanden habe, passt das hier angegebene nur für das Logo von wernerz. Gibt es eine allgemeine Beschreibung, wie ein JPG-Logo in ein passendes SVG-Logo umgewandelt, und dann gegen das phpBB-Logo ausgetauscht werden kann?
Genügt es ein JPG in SVG mit einem Programm umzuwandeln, das Original-Logo dann gegen das eigene austauschen, oder muss hier mehr gemacht werden? Danke für Rückmeldungen.

Gruß
Jürgen