MELISSA - AUGUST 2020 - 4 MIN.

Wie Sie svg Dateien verlustfrei in Google Slides importieren

SVG-Dateien verlustfrei in Google Slides zu importieren ist gar nicht so einfach. Mit dieser leicht verständlichen Schritt-für-Schritt-Erklärungen zeigen wir Ihnen wie Sie problemlos Ihre Google Slides aufpolieren.

tech

business

Symbolbild

SVGs verlustfrei in Google Slides importieren?

Unsere Lösung zur unkomplizierten, leichten und betriebsunabhängigen Arbeit.

  • Das SVG-Problem
  • Der Vergleich
  • Die Lösung

Für die perfekte Darstellung unserer Corporate Identity verwenden wir unsere pcode Shapes – kurvige Vektorgrafiken, die sich im gesamten Design wiederholen. Wir verwendeten die Shapes als Hintergrund mit transparenten Bereichen, um themenbezogen Bilder oder Grafiken einfügen zu können. Leider lassen sich diese organisch geformten Kurven nicht optimal als Rastergrafiken (PNG, JPG, JFIF, TIFF, GIF, BMP) darstellen.

Importiert man die SVG-Dateien direkt in Google Slides entstehen folgende Probleme:

  • JPG Artefakte
  • Farben werden nicht richtig dargestellt
  • Manche Bereiche der Shape verzerren sich oder werden gar nicht angezeigt

Doch wie können SVG Dateien dann trotzdem korrekt dargestellt werden - und das auch noch betriebssystemunabhängig? Der Trick liegt im Detail. Um diese Fehldarstellung zu umgehen, müssen die SVGs vor dem Import in Google Slides als eine PPTX Datei umgewandelt und dabei in Pfade aufgesplittet werden. Danach werden die Shapes in voller Auflösung und Schärfe angezeigt, wie im folgenden Screenshot ersichtlich:

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-google-slides-presentation_arsv9e.jpg", aspectRatio: "16/9", alt: "pcode Google Slide Präsentation" } } } ]} />

Nachfolgend ein Vergleichsbeispiel der Folien:

Links davon die Shape als PPTX Datei in der Präsentation. Es sind kaum Artefakte zu erkennen und der Übergang zwischen Grafik und Bild ist nahtlos. Rechts hingegen ist die Shape als unbearbeitete SVG Datei abgebildet, wie sie direkt in der Google Slides Präsentation angezeigt wird. Die Artefakte sind bei den Rändern deutlich zu erkennen.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-richtig-falsche-darstellung-artefakte_ngqitg.jpg", aspectRatio: "16/9", alt: "Vergleich zwischen Bild mit und ohne Artefakten" } } } ]} />

Hier der Vergleich mit dem Logo:

Links das Logo mit JPG Artefakte und rechts das Logo in einer PPTX Datei.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-artefakte-darstellung-im-vergleich_etaebs.png", aspectRatio: "16/9", alt: "Vergleich der Logo Artefakte" } } } ]} />

Um diesen Schritt betriebssystemunabhängig zu gestalten, schlagen wir folgenden Weg vor:

Was wir versucht haben:

Die Lösung:

1. Qualität der Bilddaten erhöhen

Die Qualität der SVGs zu erhöhen ist möglich, jedoch sind die Dateien meist so groß, dass alleine das Hochladen sehr viel Zeit in Anspruch nimmt. Die Bearbeitung in Google Slides benötigt viel Ladezeit und die finale PDF-Datei ist so groß, dass sie kaum zu verschicken wäre. Eine direkte Verbesserung der Darstellung der SVGs ist auch nur minimal erkennbar.

2. SVG als Import bei Openoffice Impress

Das Logo oder die Vektordatei wird durch drag and drop in die Datei geladen. Da das Logo nicht vollständig angezeigt wird, ist auch der nächste Schritt, die Vektordatei in einzelne Pfade aufzuteilen, nicht mehr möglich. Die Farben werden entsättigt und blass dargestellt und entsprechen nicht mehr der Originalfarbe. Ein Export ist daher nicht möglich.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-openimpress-artefakte_tk3rqs.png", aspectRatio: "16/9", alt: "Open Impress Artefakte" } } } ]} />

3. SVG als Import bei Openoffice Draw

Auch hier wird das Logo oder die Vektordatei falsch angezeigt. Der Import erfolgt wieder durch drag and drop, der Export ist daher nicht möglich.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-openoffice-draw-artefakte_hmhidl.png", aspectRatio: "16/9", alt: "OpenOffice Draw Artefakte" } } } ]} />

4. SVG als Import bei Keynote Slides

Der Import wird von einer SVG Datei nicht unterstützt.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-svg-nicht-unterstuetzt_f3wtze.png", aspectRatio: "16/9", alt: "Keynote unterstützt keine SVG Dateien" } } } ]} />

5. SVG als Import bei Powerpoint für Mac

Der Import ist möglich, der Befehl wird diesmal als “Convert to Shape” bezeichnet. Export als PPTX ist auch möglich, jedoch werden die Shapes wieder nur als PNG übernommen und können daher nicht in Google Slides hinzugefügt werden, da sie dadurch wieder unscharf dargestellt werden. ODER die PPTX Datei kann zwar aus PowerPoint Mac exportiert werden, jedoch landet sie sofort im Download Ordner, sobald man versucht, diese Datei in Google Slide hinzuzufügen.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-powertpoint-break_imxeed.png", aspectRatio: "16/9", alt: "Powerpoint Convert to Shape Funktion" } } } ]} />

6. SVG als Import bei Powerpoint für Windows

Die Möglichkeit, die SVG auf einem Mac in Illustrator als SVGs zu exportieren, und sie in Powerpoint in Windows zu öffnen, ist zwar möglich, allerdings sehr umständlich, da zwei Betriebssysteme benötigt werden und die meisten User sich auf eines beschränkten.

7. SVG als Import bei SVG2Key zu Keynote

SVG2Key ist ein Adobe Illustrator Plugin und macht das direkte Bearbeiten der SVG der einzelnen Pfade in Apple Keynote möglich.Die Installation erfolgt über die Eingabe im Terminal. SVG2Key erstellt eine eigene Keynote Präsentation mit einer Keynote Slide, in dieser SVGs in Pfade umgewandelt werden. Der Export war jedoch nicht möglich, da das Logo in falschen Farben (schwarz weiß) angezeigt wurde. Der Export war dadurch nicht möglich.

8. SVG als Import bei AI2Key zu Keynote

AI2Key ist ebenfalls ein Adobe Illustrator Plugin und exportiert Illustrator Dokumente für Apple Keynote. Die Installation erfolgt über die Eingabe im Terminal (siehe Screenshot von Terminal). Der Export der Dateien ist jedoch nicht möglich, da das Plugin nicht mit der Adobe Illustrator Version 2020 (Version 24.1.3) kompatible und somit auch die Auswahl der AI2Key nicht möglich ist.

9. Impress Draw

Es gibt eine weitere Variante bei Impress Draw, in dieser das vollständig Logo angezeigt wird, jedoch ist ein Export als PPTX Datei nicht möglich. Daher kann es auch für Google Slides nicht verwendet werden

Die Lösung – 10. SVG als Import bei Libre Office, Break, Import bei Google Slides

Wir haben eine schnellere, weniger umständliche Lösung gefunden: der pcode Workflow – wie es funktioniert, nichts kostet und nicht weh tut.

  1. Vektorgrafik aus dem Illustrator als SVG Datei exportieren
  2. In dem Programm LibreOffice als Präsentation öffnen und über Insert die SVG Datei importieren
  3. Die SVG Datei über Rechtsklick aufteilen (Break)
  4. SVG speichern unter PowerPoint 2007-365 pptx Dateiformat
  5. Die pptx-Datei in Google Slides importieren und als Google Präsentation öffnen

Der wichtigste Schritt ist der Break (3. Schritt) in LibreOffice. Wird dieser nicht gemacht, so bleiben Bitmaps in der SVG und in Google Präsentation werden die Dateien als Ganzes verpixelt angezeigt. Anbei eine finale Folie in Google Slides und als finale Seite in einem fertigen PDF.

<imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/Screenshot_2020-05-20_at_13.21.43_ubrhlv.png", aspectRatio: "16/9", alt: "Screenshot Präsentation in Libre Office" } } } ]} /><imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-svg-richtige-darstellung_hzlkye.png", aspectRatio: "16/9", alt: "korrekte Darstellung Persona Profil" } } } ]} /><imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-svg-richtige-darstellung-2_qkuhtp.png", aspectRatio: "16/9", alt: "korrekte Darstellung Detailansicht" } } } ]} /><imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-svg-richtige-darstellung-3_nnroht.png", aspectRatio: "16/9", alt: "korrekte Darstellung Detail Rundungen oben" } } } ]} /><imagesSection images={[ { devices: { mobileAndUp: { src: "/uploads/blogArticle/cloudindary/pcode-svg-richtige-darstellung-4_yk45cu.png", aspectRatio: "16/9", alt: "Korrekte Darstellung Detail Rundungen unten" } } } ]} />

pcode - passion for people

Wir entwickeln digitale Produkte. Websites, Onlineshops und Apps für eine maßgeschneiderte User Experience. Projekte von pcode sind sinnstiftend und von Menschen für Menschen gemacht.