SVG nicht valide

**BeaB** · 18.10.2017, 16:32

Moin,

ich habe eine SVG Datei über den Elementtyp "Text" - "Ein Bild hinzufügen" eingebunden.

Im Quelltext wird dann ausgegeben:

HTML-Code:

<img src="pfad.svg" width="" height="" alt="" itemprop="image">

Der Validator meckert das jedoch an:
"Bad value for attribute width on element img: The empty string is not a valid non-negative integer."

VG, Bea

**Spooky** · 20.10.2017, 08:30

Poste den Inhalt des SVGs.

**mlweb** · 20.10.2017, 10:44

Zitat von BeaB

Der Validator meckert das jedoch an:
"Bad value for attribute width on element img: The empty string is not a valid non-negative integer."

Zitat von Spooky

Poste den Inhalt des SVGs.

Ich glaube das hat nichts mit dem Inhalt des SVGs zu tun. Wenn das Attribut "width" vorhanden ist, muss da auch ein Wert drin stehen.

**Spooky** · 20.10.2017, 12:02

Das Bild wurde über "Bild hinzufügen" integriert. Dadurch wird es von Contao prozessiert. Je nach Inhalt des SVGs könnte es dann zu einem solchen Fehler kommen.

Darüberhinaus wird noch folgende Information benötigt: hast du eine Bildausgabegröße festgelegt? Bzw. ist eine Maximale Frontendbreite in den Systemeinstellungen hinterlegt?

**BeaB** · 26.10.2017, 05:06

Guten Morgen!

Bitte entschuldigt die späte Antwort.

Ich hatte mir den Inhalt der SVG angeschaut und es stimmt: Im Code gibt es keine Angaben zur Höhe und Breite.

Habe dann selber mal Illustrator angeworfen und ein bisschen getestet: Der Fehler passiert, sobald in den Optionen das Häkchen bei "interaktiv" gesetzt wird. Ordnet man diesem Bild jedoch eine Bildgröße zu, dann wird werden die fehlenden Angaben von Contao dazugeschrieben.

Ich gebe die Info mal an den Grafiker weiter.

Danke für eure Mühe und einen schönen Tag!

VG Bea

**Spooky** · 26.10.2017, 10:02

Ganz so ist es nicht. Damit Contao die Ausgabegröße eines SVGs (per Bildgrößeneinstellung) ändern kann, muss die Größenangabe aus dem SVG entfernt sein! Poste das SVG so wie es war, damit man das testen kann. Evt. liegt ein Bug in Contao vor.

**BeaB** · 27.10.2017, 11:05

Ok, jetzt habe ich über Illu eine kleine Testdatei erstellt und als SVG gespeichert. Als Code wird mir folgendes ausgegeben:

Code:

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.3 52.3">
  <defs>
    <style>
      .cls-1 {
        fill: red;
      }
    </style>
  </defs>
  <title>test</title>
  <g>
    <rect class="cls-1" x="0.5" y="0.5" width="51.3" height="51.3"/>
    <path d="M51.3,1V51.3H1V1H51.3m1-1H0V52.3H52.3V0Z"/>
  </g>
</svg>

Dann über die Dateiverwaltung hochgeladen. Keine Bildgrößen zugeordnet.

Im Quelltext kommt an:

HTML-Code:

<figure class="image_container" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="pfad/test.svg" width="" height="" alt="" itemprop="image">
</figure>

**Spooky** · 27.10.2017, 11:19

Das könntest du hier als Bug reporten: https://github.com/contao/core-bundle/issues

**matuweb** · 28.11.2017, 10:42

Ich möchte hier einmal nachhaken...

Ich möchte folgendes in Contao integrieren:

https://tympanus.net/codrops/2017/05...tooltip-ideas/

Nur werden hier leider die SVG-Hintergründe in Contao nicht dargestellt. Sonst funktioniert alles (CSS, Animation).

Ist es ein Contao BUG? Ich habe Contao 4.4.8 im Einsatz...

**matuweb** · 28.11.2017, 10:55

Bildschirmfoto 2017-11-28 um 11.51.27.png

Habe im Quelltext folgendes gefunden.
Dort wird der TAG <path> und <title> des Tool-Tip Elementes nicht aufgelöst. Ich habe diese zusätzlich unter den Contao Backend Einstellungen eingefügt.
Liegt es vielleicht daran?

**Spooky** · 28.11.2017, 12:03

Wenn du das als HTML Inhaltselement einfügen wolltest dann ja. Du musst explizit alle Tags die du brauchst in den System Einstellungen erlauben.

**matuweb** · 28.11.2017, 12:07

Aber genau das habe ich ja gemacht und die Tags werden nicht dargestellt...

Wie kann ich es denn sonst noch einbinden?

**Spooky** · 28.11.2017, 12:17

Zitat von matuweb

Aber genau das habe ich ja gemacht und die Tags werden nicht dargestellt...

Hast du das SVG davor oder danach in das Inhaltselement hinzugefügt?

**matuweb** · 28.11.2017, 12:23

Ich habe diesen Block direkt davor eingefügt, wie in der Demo:

HTML-Code:

<svg class="hidden">
			<symbol id="icon-arrow" viewBox="0 0 24 24">
				<title>arrow</title>
				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
			</symbol>
			<symbol id="icon-drop" viewBox="0 0 24 24">
				<title>drop</title>
				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
			</symbol>
		</svg>

**Spooky** · 28.11.2017, 12:25

Du kannst das erst einfügen nachdem du die Änderung in den System Einstellungen gemacht hast. Du musst das SVG also nochmal neu einfügen.

**matuweb** · 28.11.2017, 12:44

Sehr merkwürdig: jetzt habe ich den Block oben rausgenommen und auch die TAGS path und title und jetzt wird es angezeigt... kann ich nicht nachvollziehen...