Avada und SVG

[rakader]

Moin zusammen,

ich versuche seit Stunden verzweifelt SVG in Avada zu bekommen. Weder klappt das mit den in WordPress angebotenen Plugins noch mit Code-Tricks, die in Avada-Support angepriesen werden. Die Stelle mit dem Logo bleibt leer, bestenfalls schaffe ich das Logo im Medienbereich angezeigt zu bekommen.

Alle Youtube-Videos zum Thema scheinen veraltet zu sein.

ich mache nur gelegentlich Webseiten und mache das eigentlich nicht gerne, ich bin Autor. Deswegen würde ich mich sehr freuen, wenn mir jemand helfen könnte.

Vielen Dank vorab
Radulph

 

[Orlandoo]

Ohne Zugriff auf eine Entwicklungsseite wird es schwer, das Problem aufzudecken. Eine Idee ist aber: hast du mal probiert, die SVG-Datei in ein leeres Browserfenster zu ziehen? Kann der Browser das SVG überhaupt darstellen? Eventuell stimmt etwas mit der Datei nicht.
Und wenn du nicht gerne Webseiten machst: da gibt es Webdesign-Agenturen, die übernehmen so etwas gerne. Nein, die arbeiten nicht umsonst. Aber ich habe gelernt, dass man Arbeiten, die man nicht kann und auch nicht mag, besser in professionelle Hände gibt - auch wenn es Geld kostet.

 

[rakader]

Ohne Zugriff auf eine Entwicklungsseite wird es schwer, das Problem aufzudecken. Eine Idee ist aber: hast du mal probiert, die SVG-Datei in ein leeres Browserfenster zu ziehen? Kann der Browser das SVG überhaupt darstellen? Eventuell stimmt etwas mit der Datei nicht.
Und wenn du nicht gerne Webseiten machst: da gibt es Webdesign-Agenturen, die übernehmen so etwas gerne. Nein, die arbeiten nicht umsonst. Aber ich habe gelernt, dass man Arbeiten, die man nicht kann und auch nicht mag, besser in professionelle Hände gibt - auch wenn es Geld kostet.

SVG wird angezeigt, das habe ich erwähnt. Es funktioniert nur nicht im Theme, das nebenbei zu den populörsten Themes auf WordPress gehört. Den Code des SVG habe ich mir schon angeschaut, weil auch ein Deffekt meine erste Annahme war und dann z.B. Abmessungen reingeschrieben (wurde von Illustrator generiert).
Die Seite ist ein Hobbyprojekt, ich gebe schon genug Geld für Software aus. Eine Agentur verbietet sich, zumal ich doch einigermaßen programmieren kann, eben nur nicht gerne.

 

[Myhar]

Ohne Code kann man hier recht wenig weiterhelfen. Also der code der dann im Browser angezeigt wird ist wichtig, da muss dann das SVG eingebettet sein.
Bzw. wie fügst du das überhaupt in wordpress ein?

 

[rakader]

Ohne Code kann man hier recht wenig weiterhelfen. Also der code der dann im Browser angezeigt wird ist wichtig, da muss dann das SVG eingebettet sein.
Bzw. wie fügst du das überhaupt in wordpress ein?

Ich habe alle möglichen Versionen ausprobiert. Einerseits über Plugins wie SVG Support, dann über die Freigabe per functions.php.
Per Browser müsste ich noch suchen, wo ich das Logo z.B. manuell einfügen könnte, z.B. mit
<svg style="width:150px;height:150px;">
<!-- svg contents here -->
</svg>
Wenn hier jemand wäre, der sich mit Avada auskennt, wäre mir vermutlich geholfen.
Der Artikel bei Avada hilft leider nicht: https://theme-fusion.com/documentation/avada/media/using-svg-in-avada/

 

[rakader]

Hochladen klappt immerhin. Ich habe die functions.php mit diesem Code erweitert - as Theme zeigt aber weiterhin nicht an, somit habe ich auch keinen Browser-Code:

/**
* add SVG to allowed file uploads
**/
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

 

[Orlandoo]

Hast du diesen Hinweis auf der Avada-Seite auch berücksichtigt?
IMPORTANT NOTE: Please keep in mind that for SVG to work properly in the Logo and other Theme Options areas, you will have to set the width and height dimensions in the file itself, before you upload it. If there are no dimensions set on the SVG itself, then it will not appear.

 

[rakader]

Ja, das hatte ich berücksichtigt. Keine Änderung, leider.
Ich weiß inzwischen wie ich ein SVG als Aniamtion code, soviel kann ich dann doch. Das Problem muss ein spezifisches von Avada sein.
Das Problem ist, dass das Logo eine Einstellung von Avada ist und ich nicht herausfinde, wo ich etwaigen Code reinschreiben muss. Auf WordPress kann ich die location identifizieren - ganz normal im Upload.

<div class="fusion-header" style="height: 363px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="131px" data-margin-bottom="231px" data-margin-left="-250px" data-margin-right="0px">
<a class="fusion-logo-link" href="">

<!-- standard logo -->
<img src="" srcset=" 1x" width="" height="" alt="xyz Logo" data-retina_logo_url="" class="fusion-standard-logo">

SVG lade ich mit Code aus dem vorigen Post problemlos in WordPress hoch

 

[Orlandoo]

Da wird dir - ohne Zugriff auf die Seite im Browser - wohl keiner helfen können. Dass es sich um ein Avada-spezifisches Problem handelt kann man mit einem klaren Jein beantworten. Mir gibt die 3. Zeile - also die mit der Klasse “fusion-logo“ - zu denken. Da fummelt Avada anscheinend mit JavaScript rum, um das DIV zu positionieren. Was da passiert kann man nur beim Betrachten im Browser nachvollziehen. Der restliche Code birgt für mich keine Auffälligkeiten.
Aber wenn es für dich eh bloß Hobby ist: wandle das SVG doch in ein Pixelformat (also PNG oder JPG) und schau mal, ob du damit nicht auch zufrieden bist.

 

[rakader]

Da hast Du sicherlich recht. Aus Hobbygründen sollte man das machen. Ich beiße mich halt gerne in solche Sachen rein. Mal schauen… ich stelle es mal hintenan, will aber nicht aufgeben.
Idee war ein animiertes Logo, wenn man drüberfährt beobachtende Augen im i.
Ich habe das Glück, dass mir eine professionelle Art Directorin die Grafik und das Design macht; da will ich sie wegen meiner technischen Unzulänglichkeiten nicht enttäuschen.

 

[Myhar]

Funktioniert es auch nicht wenn du das SVG direkt in das template kopierst? Erstelle ein child template und passe es deinen Wünschen an, das wäre doch am einfachsten?