1 Sagen Sie, wen Sie vergleichen
Ein Name, eine Größe und die Art der Figur. Jede Zeile beginnt mit einer Größe, die Sie einfach überschreiben können. Größen dürfen so geschrieben werden, wie Sie sie schreiben — 173, 1,73 m, 5'8", 68 in — und die Zeile unter jedem Feld zeigt, was verstanden wurde, oder sagt es in Rot, wenn das Feld leer ist oder die Größe sich nicht lesen lässt. Geraten wird nie stillschweigend.
Von oben nach unten ist hier von links nach rechts auf dem Diagramm. Ziehen Sie eine Zeile am Griff an ihrem linken Rand, um sie zu verschieben, oder nehmen Sie die Pfeile, die von der Tastatur aus dasselbe tun. So oder so kehrt das Diagramm zu Ihrer eigenen Reihenfolge zurück, falls es nach Größe sortiert hatte.
Ein SVG setzt jede beliebige Zeichnung auf den Maßstab — ein Logo, einen Grundriss, ein Maschinenteil. Sie wird auf dieser Seite gelesen und geht nirgendwohin. Behalten werden nur die Formen darin: Sie kommt in einer einzigen Volltonfarbe an, die Sie je Zeile wählen, und alles, was das Netz erreichen könnte — ein verlinktes Bild, ein Stylesheet, eine Schrift, ein Skript —, bleibt zurück, statt in ein Diagramm getragen zu werden, das Sie jemandem schicken. Eine Zeichnung aus dünnen Linien statt aus gefüllten Formen kommt als einfarbiger Klecks heraus, und das ist der eine Fall, in dem dies das falsche Werkzeug ist.
Ein Foto oder ein PNG kommt stattdessen als es selbst auf das Diagramm und behält seine eigenen Farben, sodass die Zeilenfarbe es nur noch benennt. Es wird ebenfalls hier gelesen und vorher neu gezeichnet — das begrenzt, wie stark es das Diagramm wachsen lässt, und lässt die Metadaten der Datei zurück. Was durchsichtig ist, bleibt durchsichtig: ein Freisteller steht sauber auf dem Maßstab, ein Foto bringt seinen Hintergrund mit, und den schneidet man besser vorher weg.
Die meisten davon kommen gezeichnet an und nicht als schlichter Block — eine Tür mit Klinke, ein Kühlschrank mit dem Gefrierfach darüber, ein Sofa, dem man ansieht, dass es eines ist. Die Zeichnung wird in die beiden Zahlen der Zeile eingepasst, es sind also die Zahlen, die die Form bestimmen: Tippen Sie Ihre eigenen darüber, und das Bild folgt. Drei haben keine Zeichnung, weil sich nichts Freies mit richtigen Proportionen fand: Basketballkorb, Seecontainer und Küchenarbeitsplatte kommen als das Rechteck an, das früher jeder Gegenstand war.
Ein paar davon liegen wirklich fest: Ein 20-Fuß-Seecontainer ist per Definition 259 cm hoch, ein Basketballring hängt auf 305, und eine amerikanische Zimmertür misst 203 auf 81. Der Rest ist typisch und nicht genormt, denn Türen, Fenster und Arbeitsplatten sind von Land zu Land und von Haus zu Haus verschieden. Jeder Eintrag kommt als gewöhnliche Zeile an, messen Sie also nach und tippen Sie die echten Zahlen darüber.
Lassen Sie die Breite eines Objekts für die automatische Breite leer. Kann eine eingegebene Breite nicht gelesen werden, bleibt die Zeile bis zur Korrektur aus dem Diagramm.
2 Nehmen Sie es mit
Das PNG ist das, was Sie in ein Dokument oder einen Chat einfügen. Das SVG ist das zum Aufheben: Es ist das Diagramm als Anweisungen statt als Pixel, druckt also in jeder Größe scharf und lässt sich später von allem umfärben, was Vektoren öffnet.
Den Maßstab zeichnen Die Linien quer über das Diagramm und die Zahlen an beiden Seiten. Ohne sie vergleicht das Bild zwei Menschen immer noch richtig, sagt aber nicht mehr, wie groß einer von beiden ist.
Namen und Größen über jede Figur schreiben Ausgeschaltet ist das Diagramm nur Silhouetten auf einem Maßstab, und das ist das Richtige, wenn die Namen ohnehin dorthin kommen, wo Sie das Bild einfügen.
Gar kein Hintergrund Transparent, zum Ablegen auf einer Folie, die schon eine Farbe hat. Der Maßstab und die Schrift werden dunkel oder hell gezeichnet, passend zu der oben gewählten Farbe. Stellen Sie diese also ungefähr auf das ein, worauf das Bild landen wird, auch wenn der Hintergrund selbst ausgeschaltet ist.
Das ist die Höhe der Zeichenfläche, das fertige Bild wird also ein wenig höher: Die Namen stehen darüber. Die Breite ergibt sich daraus, wie viele Figuren es gibt und wie breit die Beschriftung jeder einzelnen ist. Die Zeile unter dem Bild sagt, was herausgekommen ist.
# 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.
So erstellen Sie ein Größenvergleichsdiagramm
- 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.
- Tippen Sie die Größe so, wie Sie sie schreiben.
173,1,73 m,5'8",68 inund5 ft 8werden 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ß. - 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.
- 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.
- 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.
- 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.
- 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 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
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.