Ok, gehen wir mal ins Detail
Wir nutzen mehrere Templates (verschiedene Shops) von Salepix. Nehmen wir mal den Footer als Beispiel mit den Zahlungsicons. Wenn du dort anstelle eines JPG/PNG ein SVG einfügst und auf speichern klickst, dann hast du instant an diesen STELLEN ein webP Format hängen. Mehrfache - und ich betone mehrfache - Mails an die Jungs resultierten in der Aussage, dass das so einfach nicht geht bzw. nicht möglich ist. Ich habe gebettelt darum, dass man mir einfach sagt wo ich im Quellcode die Änderung vornehmen kann, damit ich eigenständig und auf eigene Gefahr ein SVG einfügen kann. Es geht einfach nicht, das kannst du hundert Mal probieren. Was das Shoplogo anbetrifft, da ist es was anderes und mittlerweile kann man in deren Templater auch problemlos an DIESER Stelle ein SVG einfügen. Nur woanders auf der Seite ist es so easy peazy einfach nicht möglich. Es ist auch gar nicht meine Aufgabe beim Entwickler zu betteln, da hab ich keine Zeit für.
Was den Dropper angeht, so habe ich lediglich auf die Variante hingewiesen, dass diese funktioniert. Jedoch hatte ich auch eine kostenlose Variante mit hier gepostet, die bei mir eben auch funktioniert hat (um den webP Zwang zu umgehen). Ich kann nicht für das Nova Template sprechen, da ich nur Erfahrungen mit Salepix und teilweise mit Themeart habe. Wir nutzen Dropper im Übrigen auf all unseren Shops, und hier ganz sicher nicht nur um ein SVG auszutauschen
Ich verstehe absolut und in keinster Weise deren Standpunkt, dass ein SVG so abgelehnt wird. Mir wurde auch mal gesagt, dass Google das nicht annimmt/möchte 🙄 Aus meiner Sicht spricht in der heutigen Zeit absolut gar nichts mehr dagegen ein SVG einzufügen. Ebenfalls aus meiner Sicht hat es NUR Vorteile was die Dateigröße angeht und ebenso sehen Logos, Zeichnungen etc. um ein Vielfaches schärfer aus als ein PNG/JPG/WebP. Mag auch sein, dass ich da einen hohen Anspruch habe. Ich sitze vor allen möglichen Apple Displays und da sieht man heftige Unterschiede zu einem 200 Euro Full HD Display. Bildschirme werden immer besser und hochauflösender, egal ob mobil, tablet oder Desktop.
Ausserdem möchte ich beim Kauf einfach selbst entscheiden können, welches Bildformat ich einbinde und nicht durch eine Zwangsumwandlung eine Vorgabe erhalten. Ja, Google und Co. spielen eine Rolle, das sehe ich ein. Aber wir reden hier von einem Format, welches ganz sicher mittlerweiles eines nicht mehr ist:
Exotisch
Ausserdem bin ich nicht der Einzige hier im Forum, der danach schon mal gefragt hat. Es ist ja bis heute in der
WaWi nicht möglich ein Markenlogo als SVG einzuladen (ehrlichweise muss ich jedoch sagen, dass ich das schon Monate nicht mehr ausprobiert habe. Beim letzten Mal ging es jedenfalls wie immer nicht).
Ich kann auch verstehen, dass du als
Servicepartner deinen Dienst gerne anbietest. Ich bin 51 Jahre und nutze Foren seit Ende der 90er und es war in Foren immer so gewesen, dass man sich gegenseitig hilft. Und genau das war meine Intention hier, falls noch jemand anderes dieses Problem hat und eine schnelle Lösung benötigt. Nichts anderes. Weder eine Grundsatzdiskussion zum Dropper, noch zu Dienstleister oder was auch immer. Wenn du die Lösung hast im Salepix Template an jeder beliebigen Stelle ein SVG einzufügen, dann Gratulation. Ich bin selbst nicht dahinter gekommen (ausser meinen oben geschriebenen 2 Varianten)
Das ist alles, was ich zu dem Thema zu sagen habe. Jeder kann sich seinen
Shop zusammenbasteln wie er möchte
Edit: Bist du mit Salepix Templates vertraut? Weil du mir vorwirfst das keinerlei Änderungen im Child Template passieren, wenn ein Update kommt. Wenn ja, dann schau dir als Beispiel mal den Insta Feed an, wenn du es z. B. nicht möchtest, dass bei Hover der Zoom nicht mit den anderen Bildern überlappt und du es in ein DIV stecken möchtest, damit der Zoom innerhalb des Div Rahmens passiert und nicht mehr überlappt.
Beispiel Zahlungs-Icons im Footer
Code:
<div class="row no-gutters">
<img loading="lazy" decoding="async" src="/templates/FIREChild/themes/base/images/payment-icons/paypal-logo.svg" alt="We accept payment via PayPal" style="max-width: 60px; padding: 10px 5px; border-color: rgb(218, 218, 218); border-radius: 8px; border-width: 1px; border-style: solid; height: 40px; max-height: 40px; width: 60px;" width="0" height="0">
</div>
Im Backend wird alles korrekt angezeigt, auch das SVG. Einmal auf speichern drücken und
Cache leeren und es wird instant ein webP daraus generiert, was auch im Frontend ausgegeben wird.
Dropper Variante mit Inhalt ersetzen
Code:
<div id="paypal-pay" class="row no-gutters">
<img loading="lazy" decoding="async" src="#" alt="Wir akzeptieren Zahlungen per Paypal" style="max-width: 60px; padding: 10px 5px; max-height: 40px; width: 4.88599%; min-height: 40px;" width="0" height="0">
</div>
Was soll daran so verkehrt sein bezüglich Meta Daten?
Eine SVG Datei in VSCode gezogen und den Inhalt von dort via copy & paste an die gewünscht Stelle einfügen.
HTML:
<div class="row">
<div class="col col-12" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div class="payment-pp-footer-logo">
<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="53.02258560769133" viewBox="0 0 338.667 89.785" xmlns:v="https://vecta.io/nano"><g transform="translate(936.898 -21.779)"><path clip-path="none" d="M-828.604 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.792-7.416 20.368-17.465 1.589-10.134-6.328-18.971-17.549-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.488 6.507-9.031 6.507h-7.084zm45.788 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.647 13.717 5.852 21.253 0 0 9.737 7.255 20.698-.447l-.189 1.203a1.31 1.31 0 0 0 1.292 1.513h9.083c.697 0 1.289-.507 1.398-1.195l5.525-35.038a1.31 1.31 0 0 0-1.292-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z" fill="#003087"/><path clip-path="none" d="M-697.804 39.734c-.697 0-1.289.506-1.398 1.195l-8.068 51.165a1.31 1.31 0 0 0 1.294 1.513h9.568c.696 0 1.289-.507 1.398-1.195l2.37-15.025c.108-.688.701-1.195 1.398-1.195h8.699c10.164 0 18.791-7.416 20.366-17.465 1.59-10.134-6.326-18.971-17.547-18.993zm9.301 11.422h6.96c5.73 0 7.596 3.381 7.006 7.12-.59 3.747-3.487 6.507-9.031 6.507h-7.084zm45.787 3.478c-2.416.009-5.196.504-8.317 1.804-7.159 2.984-10.597 9.151-12.057 13.647 0 0-4.645 13.717 5.854 21.253 0 0 9.735 7.255 20.697-.447l-.189 1.203a1.31 1.31 0 0 0 1.294 1.513h9.082c.697 0 1.289-.507 1.398-1.195l5.527-35.038a1.31 1.31 0 0 0-1.294-1.515h-9.083c-.697 0-1.29.507-1.398 1.195l-.297 1.886s-3.967-4.333-11.216-4.306zm.297 11.067c1.043 0 1.997.144 2.853.419 3.919 1.258 6.141 5.023 5.498 9.104-.793 5.025-4.914 8.725-10.199 8.725-1.042 0-1.996-.143-2.853-.418-3.918-1.258-6.154-5.023-5.511-9.104.793-5.025 4.927-8.727 10.212-8.727z" fill="#0070e0"/><path clip-path="none" d="M-745.92 55.859c-.72 0-1.232.703-1.012 1.388l9.958 30.901-9.004 14.562c-.437.707.071 1.62.902 1.62h10.642a1.77 1.77 0 0 0 1.513-.854l27.811-46.007c.427-.707-.083-1.611-.909-1.611h-10.641a1.77 1.77 0 0 0-1.522.869l-10.947 18.482-5.557-18.345c-.181-.597-.732-1.006-1.355-1.006z" fill="#003087"/><path clip-path="none" d="M-609.107 39.734c-.696 0-1.289.507-1.398 1.195l-8.07 51.163a1.31 1.31 0 0 0 1.294 1.515h9.568c.696 0 1.289-.507 1.398-1.195l8.068-51.165a1.31 1.31 0 0 0-1.292-1.513z" fill="#0070e0"/><path clip-path="none" d="M-908.37 39.734a2.59 2.59 0 0 0-2.556 2.185l-4.247 26.936c.198-1.258 1.282-2.185 2.556-2.185h12.445c12.525 0 23.153-9.137 25.095-21.519a20.76 20.76 0 0 0 .245-2.793c-3.183-1.669-6.922-2.624-11.019-2.624z" fill="#001c64"/><path clip-path="none" d="M-874.832 42.359a20.76 20.76 0 0 1-.245 2.793c-1.942 12.382-12.571 21.519-25.095 21.519h-12.445c-1.273 0-2.358.926-2.556 2.185l-3.905 24.752-2.446 15.528a2.1 2.1 0 0 0 2.075 2.43h13.508a2.59 2.59 0 0 0 2.556-2.185l3.558-22.567a2.59 2.59 0 0 1 2.558-2.185h7.953c12.525 0 23.153-9.137 25.095-21.519 1.379-8.788-3.047-16.784-10.611-20.75z" fill="#0070e0"/><path clip-path="none" d="M-923.716 21.779c-1.273 0-2.358.926-2.556 2.183l-10.6 67.216c-.201 1.276.785 2.43 2.077 2.43h15.719l3.903-24.752 4.247-26.936a2.59 2.59 0 0 1 2.556-2.185h22.519c4.098 0 7.836.956 11.019 2.624.218-11.273-9.084-20.58-21.873-20.58z" fill="#003087"/></g></svg>
</div>
</div>
</div>
Was ist daran grundlegend verkehrt? Ich interessiere mich ernsthaft für eine charmantere und effektivere Lösung!