SVG HTML verzieht das Bild, wie bekomme ich es weg?

22.12.2019, 13:10

Hier ist der code. Hat nicht mehr hier her gepasst:

https://pastebin.com/jicq17fN

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
22.12.2019, 17:56

Schau dir die Attribute preserveAspectRatio und viewBox genauer an. Mit diesen kannst du genauer steuern, inwiefern skaliert und was angezeigt werden soll.

Beispiel anhand deines Markups: https://jsfiddle.net/ur4pjLfe/

(Beachte, dass du bei dir ein schließendes div vor der letzten section vergessen hast).

Bezüglich der Performance-Optimierung: Hier beginnt es schon bei der GZIP-Komprimierung durch den Server oder dem Einsatz von weiter vorskalierten Bildern (schau, ob du deine Bilder noch weiter verkleinern kannst).

Aber vielleicht ist dein gesamter Ansatz nicht gut. Wieso baust du dir nicht insgesamt eine Collage aus den Bildern?
chemick 
Beitragsersteller
 23.12.2019, 19:26

Ist nen heiden Aufwand die Dinger zu stylen. schon hart dass es da keine einfachere Lösung gibt. Oder wie würdes du es responsive machen? Mir fällt nur eine JS function ein die window size beobachtet und darauf hin die Attribute der Elemente manipuliert. Habe noch nichts dazu geschrieben.

regex9  24.12.2019, 14:44
@chemick

CSS Media Queries sind dir bekannt? Zudem solltest du viele prozentuale Werte nutzen und wenn möglich (und es mehr als vier solcher Bilder gibt) würde ich das Markup serverseitig mit einer Programmiersprache wie PHP zusammenbauen lassen.
FinnB132
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
22.12.2019, 13:32

Du solltest deine Bilder in SVG als base64 encoded URI einbinden und nicht als JPG Datei.

<image width="100" height="100" xlink:href="data:image/png;base64,...">

Also einfach das bild irgendwo umwandeln von JPG -> base64.

LG
Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler
chemick 
Beitragsersteller
 22.12.2019, 13:40

kannst du einen guten converter empfehlen, die die ich finde stürzten alle ab.

FinnB132  22.12.2019, 14:01
@chemick 
<!DOCTYPE HTML>
<html>
<head>
<script>
	function encodeImageFileAsURL(element) {
	 var file = element.files[0];
	 var reader = new FileReader();
	 reader.onloadend = function() {
		console.log('RESULT', reader.result)
	 }
	 reader.readAsDataURL(file);
	}
</script>
</head>
<body>
	<input type="file" onchange="encodeImageFileAsURL(this)" />
</body>
</html>

Einfach das in eine Lehre Text Datei -> Speichern unter -> convert.html -> öffnen in Chrome/Firefox...

Oder natürlich du bindest diese Funktionalität direkt in deine Webseite ein.

LG

korbi27  22.12.2019, 15:11
@FinnB132

Oder falls du PHP eventuell verwendest, geht es auch schnell:

<?php
$image = file_get_contents("image.jpg");
echo base64_encode($image);
?>