# Größenvergleich — ein Diagramm nebeneinander, zum Herunterladen

Größen eintippen, Bild mitnehmen. Zum Zeichnen wird nichts verschickt.

> Vergleichen Sie Größen nebeneinander. Nehmen Sie einen Mann, eine Frau, einen Jungen, ein Mädchen und Gegenstände dazu — eine Tür, ein Fenster, ein Whiteboard, einen Getränkeautomaten — in Zentimetern oder in Fuß und Zoll, und laden Sie das Diagramm als PNG oder SVG herunter. Gezeichnet wird es in Ihrem Browser.

Dies ist ein interaktives Browser-Werkzeug unter https://abox.tools/de/groessenvergleich-erstellen/. Dateien werden auf dem Gerät verarbeitet, auf dem dieser Browser läuft. Bewusstes Teilen und optionale Netzwerkfunktionen werden auf der Seite erklärt. Hier folgt die schriftliche Erklärung; zum Benutzen öffnen Sie die Adresse.

## Ihre Namen, Größen und das Diagramm daraus werden **in Ihrem Browser verarbeitet**. Kein Upload zur Verarbeitung.

Ein Größendiagramm ist Rechnen und eine Zeichnung: Es gibt keine Datei zu senden und keinen Dienst zu fragen — und die eine Datei, die diese Seite annimmt, ein eigenes Bild für den Maßstab, wird hier gelesen und geht nirgendwohin. Mann, Frau, Junge und Mädchen sind gemeinfreie Zeichnungen, die mit dieser Seite ausgeliefert werden, und Junge und Mädchen sind Zeichnungen wirklicher Kinder statt klein gemachter Erwachsener — und genau das verhindert, dass ein Familiendiagramm auf eine Weise falsch aussieht, die niemand benennen kann. Jeder Schritt davon geschieht in ein paar hundert Zeilen JavaScript auf dieser Seite, die Sie lesen können. Es gibt keinerlei Netzwerkfunktion, und das zählt hier, weil das, was Sie tippen, eine Liste von Menschen ist und wie groß jeder davon ist.

- ✗ Kein Upload
- ✗ Kein Konto
- ✗ Kein Wasserzeichen
- ✓ Funktioniert offline
- ✓ Quelloffen

## So erstellen Sie ein Größenvergleichsdiagramm

1. **Erst alle eintragen, dann über das Aussehen nachdenken.** Eine Zeile ist eine Figur, ein Name, eine Größe und eine Farbe. Der Name ist freiwillig — ein Diagramm aus zwei namenlosen Silhouetten mit ihren Größen darüber ist oft genau das, was jemand will — und die Pfeile an jeder Zeile schieben sie nach links oder rechts, falls die Reihenfolge zählt.
2. **Tippen Sie die Größe so, wie Sie sie schreiben.** `173`, `1,73 m`, `5'8"`, `68 in` und `5 ft 8` werden alle richtig gelesen. Die Zeile unter dem Feld zeigt, was verstanden wurde, und zwar in beiden Systemen. Ein Lesefehler ist damit sichtbar, bevor gezeichnet wird, und nicht erst nach dem Drucken. Eine nackte Zahl sind Zentimeter auf einem metrischen Diagramm und Zoll auf einem imperialen, und eine nackte Zahl unter drei sind Meter — niemand ist 1,73 cm groß.
3. **Wählen Sie die Figur, die zur Person passt.** Ein Kind ist etwa sechs Kopfhöhen groß und ein Erwachsener siebeneinhalb, ein als geschrumpfter Erwachsener gezeichnetes Kind sieht also auf eine Weise falsch aus, die schwer zu benennen und leicht zu sehen ist. Der Junge und das Mädchen sind Zeichnungen wirklicher Kinder und keine klein gemachten Erwachsenen, und genau das macht den größten Teil davon aus, dass ein Familiendiagramm nach einer Familie aussieht. Jede Zeile kommt außerdem schon mit einer Größe an, wer also jemanden hinzufügt, zeichnet jemanden — tippen Sie einfach darüber.
4. **Stellen Sie etwas Vertrautes daneben.** Eine Zahl ist abstrakt, eine Türöffnung nicht. Ein einziger Gegenstand in einer Größe, die jeder kennt — eine Tür, ein Fenster, ein Whiteboard aus dem Klassenzimmer, ein Getränkeautomat — macht aus einem Diagramm, das zwei Größen nennt, eines, das sie zeigt. Das Menü hält zwanzig davon bereit, gruppiert, und jeder wird zu einer gewöhnlichen Zeile, über die Sie Ihre eigenen Zahlen tippen können. Gegenstände haben neben der Höhe auch eine Breite, eine Tür ist also 203 auf 81 und kein Streifen.
5. **Oder setzen Sie Ihre eigene Zeichnung darauf.** **Eigenes Bild** nimmt eine Datei von Ihrem Rechner und setzt sie in der Höhe, die Sie ihr geben, auf den Maßstab — das Mittel der Wahl, wenn es im Diagramm um ein Produkt, ein Fahrzeug oder ein Gebäude geht statt um einen Menschen. Ein SVG wird wie jede andere Figur in der Farbe der Zeile gezeichnet; eine Fotografie oder ein PNG kommt so darauf, wie es ist. Beide behalten ihre eigenen Proportionen, und beide werden hier gelesen, statt irgendwohin gesendet zu werden.
6. **Stellen Sie den Maßstab auf die Einheiten Ihrer Leser ein.** Der Wechsel zwischen Zentimetern und Fuß schreibt um, was in den Feldern steht, statt es umzudeuten. Das Diagramm selbst bewegt sich also nicht, nur die Schreibweise. Ist das Diagramm für zwei Publika, so steht die Größe über jeder Figur in der Einheit des Diagramms, und die Zeile unter jedem Feld hat beide.
7. **Das PNG zum Einfügen, das SVG zum Drucken.** Das PNG ist ein Bild in der Pixelhöhe, die Sie eingestellt haben, und das ist es, was ein Chatfenster, ein Dokument oder eine Folie will. Das SVG ist das Diagramm als Anweisungen, es druckt also in jeder Größe scharf und lässt sich hinterher noch von allem umfärben, was Vektoren öffnet.

## Die ausführliche Fassung

[Wie man ein Größenvergleichsdiagramm erstellt](https://abox.tools/de/ratgeber/groessenvergleich-diagramm-erstellen/): Aus einer Liste von Größen ein Bild nebeneinander machen: wie die Größen geschrieben werden, welche Figur zu einem Kind gehört, warum ein einziger vertrauter Gegenstand mehr bringt als eine dritte Person, und wie das Diagramm als PNG oder SVG herauskommt.

## Auch im Werkzeugkasten

- [Unternehmensprofil-Vorschau](https://abox.tools/de/google-unternehmensprofil-vorschau/): Tippen Sie es ein, und es wird die Karte, die Google zeichnen würde. Zum Zeichnen wird nichts verschickt.
- [Bildkompressor](https://abox.tools/de/bild-komprimieren/): Sie nennen die Größe. Den Rest rechnet es aus.
- [Bildskalierer](https://abox.tools/de/bildgroesse-aendern/): Größe nennen. Rahmen ziehen. Format wählen.
- [HEIC zu JPG](https://abox.tools/de/heic-in-jpg-umwandeln/): Die Fotos, die ein iPhone macht, in einem Format, das jedes Programm öffnet.

## Fragen

### Wird irgendetwas, das ich eintippe, irgendwohin geschickt?

Nein. Das Diagramm wird von JavaScript auf dieser Seite gezeichnet, auf Ihrem eigenen Gerät, und eine Netzfunktion hat dieses Werkzeug überhaupt nicht — es ruft nie etwas ab und sendet nie etwas. In der `Content-Security-Policy` der Seite steht jede Adresse, die sie kontaktieren darf; keine davon gehört uns. Das gehört hier deutlich gesagt, denn die Eingabe ist eine Liste von Namen und wie groß jeder davon ist, und das ist persönlicher als das meiste, womit diese Seite umgeht.

### Kann ich das Diagramm herunterladen?

Ja, als PNG oder als SVG, ohne Wasserzeichen und ohne Konto. Das PNG wird in der Pixelhöhe gezeichnet, die Sie einstellen, und ist das, was man in ein Dokument, eine Folie oder einen Chat einfügt. Das SVG ist das Diagramm als Anweisungen statt als Pixel: Es druckt in jeder Größe scharf und lässt sich später in jedem Vektorprogramm öffnen und umfärben. Beide entstehen aus derselben Auszeichnung, die auf dem Bildschirm steht, keines von beiden kann also von der Vorschau abweichen.

### Wie schreibe ich die Größe — in Zentimetern oder in Fuß?

Wie Sie wollen, in jeder Zeile, so wie Sie es normalerweise schreiben. `173`, `173 cm`, `1,73 m`, `5'8"`, `5 ft 8 in` und `68 in` werden alle verstanden, und die Zeile unter dem Feld zeigt in beiden Systemen, was gelesen wurde. Eine nackte Zahl sind Zentimeter, wenn das Diagramm metrisch ist, und Zoll, wenn es imperial ist; eine nackte Zahl unter drei wird als Meter genommen, denn 1,73 cm ist keine Größe, die jemand eintippt.

### Warum sehen die Kinder nicht aus wie kleine Erwachsene?

Weil ein Kind keiner ist. Körperproportionen ändern sich mit dem Alter: Ein Zweijähriger ist rund viereinhalb Kopfhöhen groß, ein Achtjähriger sechs, ein Erwachsener siebeneinhalb — der Kopf ist also fast ein Viertel eines kleinen Kindes und ein Achtel eines Erwachsenen. Der Junge und das Mädchen hier sind Zeichnungen wirklicher Kinder und keine verkleinerte einzelne Silhouette, und deshalb sieht ein Familiendiagramm nach einer Familie aus und nicht nach vier Erwachsenen in verschiedenen Größen.

### Woher kommen die Figuren?

Alle vier sind Zeichnungen anderer Leute, alle gemeinfrei: der Mann von pitr, die Frau von Madeleine Price Ball, das Mädchen von OpenClipart-Vectors und der Junge von Ryan Kissinger für die NIH-BioArt-Bibliothek. Jede Datei wird mit dieser Seite in `vendor/` so ausgeliefert, wie sie veröffentlicht wurde, Sie können sie also gegen die Originale prüfen. Gemeinfrei verlangt nichts, und darum geht es: Die Zeichnung landet in einem Bild, das Sie herunterladen, und eine Lizenz, die eine Namensnennung verlangt, würde diese Anforderung an Ihr Diagramm heften.

### Kann ich mein eigenes Bild auf das Diagramm setzen?

Ja — **Eigenes Bild** nimmt eine Zeichnung oder eine Fotografie und setzt sie in der Höhe, die Sie eintippen, auf den Maßstab: ein Logo, einen Grundriss, ein Maschinenteil, ein Auto oder ein Foto der Sache selbst. Die Proportionen sind ihre eigenen, es gibt also keine Breite einzutragen. \
\
Ein **SVG** wird in einer einzigen Volltonfarbe gezeichnet, in der, auf die diese Zeile gesetzt ist, weil der Rest des Diagramms genau das ist — eine Zeichnung aus dünnen Umrissen statt aus gefüllten Formen kommt also als Klecks heraus, und dafür ist dies das falsche Werkzeug. Behalten werden nur die *Formen*: Die Datei wird aus Pfaden, Rechtecken und Kreisen von Grund auf neu gebaut, und alles, was das Netz erreichen könnte — ein verlinktes Bild, ein Stylesheet, eine Schrift, ein Skript —, bleibt zurück. \
\
Ein **Foto oder ein PNG** kommt so aufs Diagramm, wie es ist, und behält seine eigenen Farben; die Farbe der Zeile beschriftet es dann nur noch. Es wird hier neu gezeichnet, bevor es daraufkommt, was begrenzt, wie viel es dem Diagramm hinzufügt, und die Metadaten der Datei zurücklässt. Transparenz bleibt erhalten, ein Freisteller steht also sauber auf dem Maßstab — ein Foto bringt dagegen seinen Hintergrund mit, und den schneidet man besser vorher weg. \
\
Keine der beiden Dateien geht irgendwohin. Das zählt doppelt, denn das Diagramm, das Sie herunterladen, ist eine Datei, die Sie vielleicht jemandem schicken.

### Warum gibt es kein Kleinkind und kein Baby?

Wir fanden keine Kleinkind- oder Babyzeichnung, die den Gemeinfreiheits- und Zeichenanforderungen dieses Werkzeugs entsprach. Die mitgelieferten Kinder sind ein Junge und ein Mädchen, kein vollständiger Katalog von Kinderzeichnungen. Für ein jüngeres Kind die gemessene Größe einstellen oder ein geeignetes eigenes Bild hinzufügen; der Maßstab trägt den Messwert.

### Wie viele Menschen passen auf ein Diagramm?

Zwölf. Das ist keine technische Grenze — die Zeichnung würde bereitwillig dreißig machen — aber jenseits eines Dutzends werden die Spalten schmaler als die Namen darüber, und das Bild hört auf, lesbar zu sein. Wenn Sie mehr brauchen, gibt Ihnen das Abschalten der Namen die Breite zurück, oder zwei Diagramme sagen es besser als eines.

### Kann ich einen Gegenstand aufs Diagramm setzen?

Ja — und die meisten kommen gezeichnet an. Das Menü hält zwanzig zum Anfangen bereit, in vier Gruppen: Türen und Fenster, Schule und Büro (ein Whiteboard, ein Schreibtisch, ein Aktenschrank, eine Leinwand), Dinge aus der Stadt (ein Getränkeautomat, eine Mülltonne, ein Basketballkorb, ein 20-Fuß-Seecontainer) und Dinge aus dem Haus. Siebzehn davon bringen ein Bild mit — eine Tür mit Klinke, ein Kühlschrank mit dem Gefrierfach darüber, ein Sofa, dem man ansieht, dass es eines ist —, und das Bild wird in Höhe und Breite der Zeile eingepasst, sodass weiterhin die Zahlen die Größe bestimmen und Ihre eigenen, darübergetippten Zahlen weiterhin gelten. Die anderen drei sind schlichte Rechtecke, weil sich für sie keine freie Zeichnung fand, die zugleich richtig und richtig proportioniert war, und eine falsche Zeichnung ist auf einem Diagramm über Maßstäbe schlimmer als ein ehrlicher Block. \
\
Einige dieser Maße sind echte Normen und einige typische Größen, und die Seite sagt das laut. Ein vertrauter Gegenstand tut für ein Diagramm mehr als beliebig viele zusätzliche Menschen: Er macht aus einem Vergleich ein Gefühl für Größe.

### Gibt es eine Figur für einen Hund oder eine Katze?

Nein, und das ist eine bewusste Lücke und kein Versehen. Beide wurden gebaut — im Profil, stehend, den Kopf auf Schulterhöhe, damit die Oberkante der Zeichnung die Größe daneben wäre, denn dort misst jeder Rassestandard ein Tier. Sie wurden nicht gut genug, um sie auszuliefern: Ein Vierbeiner von der Seite neben vier Menschen von vorn liest sich als Fehler, selbst wenn die Zeichnung gut ist. Ein Rechteck auf Schulterhöhe des Tieres ist einstweilen ehrlich.

### Kann ich das Diagramm mit einem Link teilen?

Von hier aus nicht, und das ist Absicht. Werkzeuge, die es anbieten, machen es, indem sie die ganze Liste in die Adresse packen, und damit landet jeder Name und jede Größe in allem, wodurch der Link reist — in den Protokollen eines Chat-Servers, in einem Mail-Scanner, in jemandes Browserverlauf, in einem Dienst, der Linkvorschauen abruft. Laden Sie das Bild herunter und schicken Sie das: Es sagt dasselbe und trägt keine Liste mit sich.

### Ist es kostenlos, und darf ich das Diagramm gewerblich nutzen?

Es ist kostenlos, es gibt kein Konto und kein Wasserzeichen, und Sie dürfen das Ergebnis in einen Bericht, eine Präsentation, ein Inserat oder ein Produkt setzen. Bezahlt wird die Seite über Werbung. An einem Diagramm, das Sie hier machen, gehört uns nichts, und aufgehoben wird nichts.

### Warum ist der Maßstab in Zehnern und nicht in Einern?

Weil der Abstand danach gewählt wird, wie viele Linien das Bild tragen kann, und nicht nach einer festen Zahl. Ein Diagramm mit zwei Erwachsenen bekommt alle zehn Zentimeter eine Linie; stellen Sie einen Basketballkorb dazu, und die Linien rücken auf fünfundzwanzig, denn neunzig Linien auf einem Bild sind ein grauer Schleier und kein Maßstab. In Fuß und Zoll ist die Leiter ein, drei, sechs und zwölf Zoll, damit die Linien auf ganzen Zoll landen statt daneben.

### Kann ich das Diagramm auf eine dunkle Folie setzen?

Ja. Stellen Sie den Hintergrund auf die Farbe, auf der es liegen wird, und der Maßstab und die Schrift wechseln passend dazu zwischen dunkel und hell — ausgerechnet aus der Helligkeit der Farbe und nicht geraten. Setzen Sie dann das Häkchen bei „Gar kein Hintergrund“, wenn das Bild selbst transparent sein soll: Über die Farbe der Schrift entscheidet immer noch die gewählte Farbe, ein transparentes Diagramm für eine marineblaue Folie kommt darauf also lesbar heraus.

### Funktioniert es offline?

Ja. Laden Sie die Seite einmal, trennen Sie dann die Internetverbindung, und sie arbeitet weiter. Das ist zugleich der einfachste Beweis dafür, dass nichts hochgeladen wird: Ein Werkzeug, das Ihre Liste wegschickt, um ein Diagramm zeichnen zu lassen, bliebe in dem Moment stehen, in dem Sie die Verbindung trennen.

## So lässt sich das Datenschutzversprechen nachprüfen

- **Die Verarbeitung findet in diesem Browser statt.** Dieses Werkzeug verarbeitet Eingaben und Ergebnisse im Browser. Sein Verarbeitungscode lädt sie nicht zur Verarbeitung hoch. Content-Security-Policy begrenzt Ressourcen und Verbindungsziele; erlaubte Hosts können jedoch Anfragen empfangen. Die Richtlinie prüft keine Nutzdaten und beweist allein keine ausbleibende Übertragung. Vergleichen Sie Quelltext und konkrete Anfragen oder führen Sie die lokale Operation ohne Verbindung aus.
- **Nichts hier ruft etwas ab.** In `src/` gibt es nirgends ein `fetch`, kein `XMLHttpRequest` und kein `sendBeacon`. In der Content-Security-Policy steht jede Adresse, die diese Seite kontaktieren darf, und keine einzige davon gehört uns.
- **Zwischen zwei Besuchen wird auch nichts gemerkt.** Das Diagramm lebt auf der Seite und sonst nirgends. Schließen Sie den Tab, und die Liste ist weg: Kein Konto hält sie, kein Cookie trägt sie, und in den Speicher dieses Browsers wird nichts geschrieben. Deshalb ist ein Diagramm, das Sie behalten wollen, auch ein Diagramm, das Sie herunterladen.
- **Der Link trägt das Diagramm nicht.** Etliche Werkzeuge dieser Art packen die ganze Liste in die Adresszeile, damit sie sich teilen lässt, und machen damit aus jedem Namen und jeder Größe etwas, das alles protokolliert, wodurch der Link läuft — ein Chat-Server, ein Mail-Scanner, jemandes Browserverlauf. Die Adresse dieser Seite ändert sich beim Tippen nie.
- **Das PNG entsteht aus dem SVG, das auf dem Bildschirm steht.** Der Download ist keine zweite Darstellung, die von der Vorschau abweichen könnte. Dieselbe Auszeichnung wird dem Browser übergeben und auf ein Canvas gemalt, und genau deshalb geht das auch mit gezogenem Netzstecker: Es gibt keine Schrift abzurufen und kein Bild darin zu laden.
- **Ein Bild, das Sie hinzufügen, wird hier gelesen und nie gesendet.** Die Datei verlässt diese Seite nie — sie wird mit dem browsereigenen `FileReader` gelesen und in ein totes Dokument geparst, das nichts ausführt. Gezeichnet wird nicht diese Datei: `src/import-svg.js` baut aus einer Positivliste von Formen und Geometrie eine NEUE Zeichnung, sodass ein Skript, ein Stylesheet, eine Schrift, ein verlinktes Bild oder ein Verweis auf ein anderes Dokument zurückbleibt, statt mitgenommen zu werden. Das zählt doppelt, denn das Diagramm, das Sie herunterladen, ist eine Datei, die Sie anderen schicken: Was überlebt hätte, wäre deren Browser, der Tage später den Server eines Fremden aufruft — aus etwas, das diese Seite geschrieben hat. Eine Fotografie oder ein PNG ist kein Programm und hat nichts, was neu gebaut werden müsste: Der browsereigene Decoder liest sie, und sie wird hier auf ein Canvas neu gezeichnet, bevor sie aufs Diagramm kommt. Genau dieses Neuzeichnen lässt die Metadaten der Datei zurück — die Kamera, den Ort, das Profil, was auch immer darin stand —, denn nichts davon überlebt ein Canvas. Im Diagramm landet ein Bild, das diese Seite selbst kodiert hat, als Daten hineingeschrieben und nicht als Adresse, sodass das Diagramm nach wie vor auf nichts verweist.
- **Die Zeichnungen sind hier, sie werden nicht abgerufen.** Alle vier Figuren sind gemeinfreie Bilder, und sie kommen mit dem Rest der Seite von dieser Domain — keine Icon-Schriftart, kein CDN, kein Sprite-Bild, das beim Tippen vom Server eines anderen geholt wird. Deshalb zeichnet das Diagramm auch ohne Netzverbindung weiter.
- **Was Google lädt und was Google nicht bekommt.** Die Werbe- und Messskripte kommen von Google, der Spenden-Button von Buy Me a Coffee. Keinem von ihnen wird ein Name oder eine Größe übergeben. Jede Zeile, die aus Ihrer Liste ein Bild macht, kommt von dieser Domain selbst und steht im Repository.
- **Es funktioniert offline.** Trennen Sie die Netzverbindung, und das Werkzeug arbeitet unverändert weiter, denn einen Netzschritt gab es darin nie. Einen einfacheren Beweis gibt es nicht.

**Prüfen Sie es selbst.** Nichts davon müssen Sie uns glauben. Ein Build-Skript erzeugt diese Seite aus den Vorlagen und der Konfiguration im Repository, und dieses Skript können Sie lesen und selbst ausführen. Das Ergebnis liegt im Branch `dist`. Vergleichen Sie also, was ausgeliefert wird, mit dem, was ein Build der Quellen hervorbringt: https://github.com/A-Box-of-Tools/website

Zuerst lesenswert sind `config/site.toml` für die Content-Security-Policy, `src/traced.js` und `vendor/` für die vier Figuren und die Herkunft ihrer Zeichnungen, `src/figures.js` für die Liste, aus der das Menü gebaut wird, `src/units.js` dafür, wie aus einer getippten Größe eine Zahl wird und wie der Maßstab beschriftet ist, `src/chart.js` für das Layout, `src/save.js` für die beiden Downloads — das sind das SVG auf dem Bildschirm und dasselbe SVG auf ein Canvas gemalt — und `src/import-svg.js` für die Positivliste, aus der ein hochgeladenes SVG neu gebaut wird, die einzige Datei hier, bei der ein Fehler zählen würde.