FROM CACHE - de_header

SVG auf Seiten verwenden

Nick812k
Tourist
11 0 2

Guten Tag,

seit 2 Tagen versuche ich herauszufinden, wie man Vektorgrafiken in einer Seite einbaut. Ich möchte für die Versandseite unter dem Seitentitel und über dem Text eine Versand relevante Grafik hinzufügen, bei FAQ eine FAQ relevante Grafik etc. Ich hab das versucht mit PNG zu machen allerdings ist die Grafik viel zu unscharf. Ich habe nun die SVG Dateien und versuche seit 2 Tagen im Internet eine Lösung zu finden.

Das einzige was ich finden konnte ist dass man die SVG Datei im Code unter Assets hochladen soll. Das habe ich gemacht, aber wie geht es jetzt weiter? Ich habe im HTML von der PNG Datei die ich früher hochgeladen hatte die Datei in img src="..." die xyz.png gelöscht und xyz.svg eingefügt. Es hat nicht funktioniert auf der Seite erscheint nichts. Ich habe 

{{ 'xyz.svg' | asset_url }}

 auch probiert.

Ich habe im englischen Forum ein Thread eröffnet, aber nach 30 Views konnte mir keiner Antworten. Ich bin wirklich Ratlos, auf Google konnte ich in 2 Tagen nichts finden. Ich würde gern den Shop fertig machen und mit der Testphase anfangen. Ich bitte um Hilfe!

 

Vielen vielen Dank im Voraus

Mit freundlichen Grüßen

3 ANTWORTEN 3

Gabe
Shopify Staff
16357 2587 3853

Hey @Nick812k 

Gabe hier aus Shopify! Vielen Dank für die gute Frage.

Das Shopify System konvertiert alle Bilder im Backend zu .pngs und .jpgs (auch Progressives JPEG, .gif, .mp4, .mov, .glb.aufgrund des Content Delivery Network (CDN) wie du hier lesen kannst.

Wie du auf dieser Seite lesen kannst, werden SVG-Dateien leider nicht unterstützt. Was das Hauptproblem betrifft, nämlich die Verwendung einer SVG-Datei als Vektorgrafik, so ist deine Idee sehr gut, und ich stimme voll und ganz damit überein, da ich auch ein Liebhaber von Qualität und SVG-Dateien bin aufgrund deren “Scalabilities” ohne “lossy” zu werden.

Abgesehen davon verstehe ich, dass du lieber die SVG-Datei verwenden möchtest, also habe ich einen Code im Internet gefunden der ggf. helfen kann -> aber OHNE GEWÄHR! Bitte einen Experten konsultieren falls das nicht geht:

<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Livello_1" x="0px" y="0px" viewbox="0 0 153 44.7" style="enable-background:new 0 0 153 44.7;" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<style type="text/css">
	.st0{fill:#8B151A;}
</style>
<g>
	<path class="st0" d="M1.2,1.3h6.9c3.2,0,5.4,2.4,5.4,5.7c0,3.4-2.2,5.8-5.4,5.8H5.3v5.2H1.2C1.2,17.9,1.2,1.3,1.2,1.3z M7.3,9.3   c1.4,0,2.1-1,2.1-2.3S8.8,4.8,7.4,4.8H5.3v4.5H7.3z"></path>
	<path class="st0" d="M15.8,1.3h4.1v10.6c0,1.8,1.1,2.7,2.9,2.7c1.8,0,2.9-0.9,2.9-2.7V1.3h4.1v10.6c0,3.8-2.8,6.4-7,6.4   c-4.2,0-7-2.7-7-6.4L15.8,1.3L15.8,1.3z"></path>
	<path class="st0" d="M33.5,1.3h4.1L42.2,9c0.7,1.1,1.4,2.8,1.4,2.8h0c0,0-0.2-1.8-0.2-2.8V1.3h4.1v16.7h-4.1l-4.6-7.8   c-0.7-1.1-1.4-2.8-1.4-2.8h0c0,0,0.2,1.8,0.2,2.8v7.8h-4.1L33.5,1.3L33.5,1.3z"></path>
	<path class="st0" d="M54.7,4.8h-5.1V1.3h14.2v3.5h-5.1v13.2h-4.1L54.7,4.8L54.7,4.8z"></path>
	<path class="st0" d="M85,1.3h10.5v3.5H89v3h5.1v3.5H89v3.2h6.7v3.5H85V1.3z"></path>
	<path class="st0" d="M106.3,1c5,0,8.7,3.7,8.7,8.5c0,1.9-0.7,3.5-1.7,4.9l1.8,1.4l-2.3,2.6l-1.7-1.6c-1.4,0.9-3,1.4-4.8,1.4   c-5,0-8.7-3.8-8.7-8.7C97.5,4.7,101.2,1,106.3,1z M106.3,14.5c0.6,0,1.3-0.1,1.8-0.4l-1.7-1.5l2.3-2.6l1.7,1.6   c0.3-0.7,0.4-1.4,0.4-2.1c0-2.7-2-4.8-4.5-4.8c-2.5,0-4.5,2.1-4.5,4.8C101.8,12.3,103.8,14.5,106.3,14.5z"></path>
	<path class="st0" d="M117.8,1.3h4.1v10.6c0,1.8,1.1,2.7,2.9,2.7s2.9-0.9,2.9-2.7V1.3h4.1v10.6c0,3.8-2.8,6.4-7,6.4   c-4.2,0-7-2.7-7-6.4L117.8,1.3L117.8,1.3z"></path>
	<path class="st0" d="M143,1c5,0,8.7,3.7,8.7,8.5c0,4.9-3.7,8.7-8.7,8.7s-8.7-3.8-8.7-8.7C134.3,4.7,138,1,143,1z M143,14.5   c2.5,0,4.5-2.1,4.5-5c0-2.7-2-4.8-4.5-4.8s-4.5,2.1-4.5,4.8C138.5,12.3,140.5,14.5,143,14.5z"></path>
	<g>
		<path class="st0" d="M73.7,8.5l0.2,0.1c2.6,0.9,5.8,1.9,6.4,6.4c1.2-1.5,1.9-3.4,1.9-5.5c0-4.8-3.7-8.5-8.7-8.5    c-1.8,0-3.5,0.5-4.8,1.3C68.5,6.8,70.7,7.5,73.7,8.5z"></path>
		<path class="st0" d="M73.2,10.7L73,10.6c-2.7-0.9-5.8-1.9-6.4-6.4c-1.2,1.5-1.8,3.3-1.8,5.3c0,4.9,3.7,8.7,8.7,8.7    c1.8,0,3.5-0.5,4.8-1.4C78.4,12.4,76.2,11.6,73.2,10.7z"></path>
	</g>
</g>
<g>
	<path class="st0" d="M36,33.6h13.9l-0.2,1.1H35.8L36,33.6z"></path>
	<path class="st0" d="M56,38.6l0.2-1c0.8,0.3,1.8,0.5,2.7,0.5c1.4,0,2.2-0.6,2.2-1.5c0-2-4.1-1.7-4.1-4.4c0-1.3,0.9-2.5,3.1-2.5   c1,0,1.9,0.3,2.6,0.5l-0.2,0.9c-0.7-0.2-1.5-0.5-2.4-0.5c-1.6,0-2,0.8-2,1.4c0,1.9,4.1,1.6,4.1,4.4c0,1.4-1,2.6-3.4,2.6   C57.8,39.2,56.8,39,56,38.6z"></path>
	<path class="st0" d="M66.4,25.1h-1.7l0.2-1h2.9l-1.3,7.5c0.9-0.8,2.4-1.8,3.8-1.8c1.6,0,2.4,1.1,2.1,3l-0.8,4.3   c-0.1,0.6,0.1,1,0.7,1c0.4,0,0.9-0.2,1.2-0.3l-0.2,1C73,39,72.5,39.2,72,39.2c-1.3,0-1.8-0.9-1.6-2.1l0.7-4.1   c0.2-1.2,0-2.1-1.2-2.1c-1.3,0-2.7,1.1-3.7,1.9L65.2,39H64L66.4,25.1z"></path>
	<path class="st0" d="M74.9,35.2c0-3,2.1-5.4,5-5.4c2.3,0,3.8,1.4,3.8,4c0,3-2.1,5.4-5,5.4C76.4,39.2,74.9,37.8,74.9,35.2z    M82.4,33.8c0-1.8-0.9-3-2.5-3c-2.1,0-3.7,2-3.7,4.4c0,1.8,0.9,3,2.6,3C80.8,38.2,82.4,36.2,82.4,33.8z"></path>
	<path class="st0" d="M87.1,37.2l-1,5.9h-1.2l2.1-12.1h-1.6l0.2-1h2.8L88,31.5c0.8-1,1.9-1.7,3.3-1.7c2,0,3.5,1.4,3.5,4.1   c0,3.1-2.1,5.3-4.7,5.3C88.5,39.2,87.6,38.3,87.1,37.2z M93.5,33.9c0-1.9-1-3.1-2.5-3.1c-2.1,0-3.6,2.1-3.6,4.4c0,1.7,0.9,3,2.5,3   C92,38.2,93.5,36.3,93.5,33.9z"></path>
	<path class="st0" d="M101.8,33.6h13.9l-0.2,1.1h-13.9L101.8,33.6z"></path>
</g>
</svg>

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Nick812k
Tourist
11 0 2

Vielen Dank für die Antwort @Gabe !

Ich habe auf dieser Seite https://snocks.com/pages/kontakt von SNOCKS gesehen dass man Vektoren verwenden kann, daher die Idee. 

Ich habe zufälligerweise eine Lösung gefunden. 

Ich hatte am Anfang versucht, über "Insert Image" beim Text-Editor der Seiten (Oder in meinem Fall unter "Rechtliches", bei "Versand". Dort habe ich ein Error bekommen als ich SVG Dateien hochladen wollte. Ich hab dann später versucht "Einstellungen" -> "Dateien" eine SVG Datei hochzuladen, und es hat komischerweise geklappt

Gabe
Shopify Staff
16357 2587 3853

Hey @Nick812k 

Der Workaround ist ja klasse und ich werde das auch für mein Shop verwenden. Wie man so schön sagt: Nicht ist unmöglich!

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog