pixel
Seite wählen

NETWAYS Blog

Weder eins noch null – Nicht-binäre Leute

Einer unserer Werte ist Diversität. Bei uns sind alle willkommen: Egal, ob straight, bi, gay oder gray, ob Frau, Mann oder was ganz anderes, ob Cis oder Trans, ob ein Partner, keiner oder eine ganze Schar, oder irgendwie ganz anders ver-queert. Egal, welche Nationalität oder Herkunft – was zählt, bist Du als Mensch und wir respektieren Dich und sind #proud, dich bei uns zu haben! Seit über einem Jahr gibt es bei NETWAYS auch die Gruppe Queerways, die dem Austausch rund um LGBTQI+ dient. Anlässlich des Pride Months Juni haben wir eine kleine Serie entwickelt, mit der wir euch queere Themen näherbringen wollen. Heute, pünktlich zum International Non-Binary People’s Day – mache ich mit meinem Post den Abschluss zu unserem queeren Monat. 

Was sind denn bitte nicht-binäre Leute? Irgendwas mit Computern?

Nichtbinär, manchmal auch non-binär oder wie im Englischen nonbinary, ist ein Überbegriff für alle Menschen, die weder männlich noch weiblich sind – also nicht im binären System sich einer 1 oder 0 zuordnen lassen. Transgeschlechtlich ist ein Überbegriff für alle Menschen, die nicht das Geschlecht sind, dem sie bei der Geburt zugewiesen wurden. Die wenigsten nicht-binären Menschen haben bei Geburt nicht eines der beiden Geschlechter “männlich” oder “weiblich” zugewiesen bekommen, würden damit also technisch unter den Trans* Schirmbegriff fallen. Das heißt aber nicht, dass sich Jedermensch damit wohl fühlt, trans genannt zu werden, denn Transgeschlechtlichkeit kommt oft mit gewissen Erwartungen einher. Trans ist wie bei jeder anderen Identität, wer sich selbst als trans definiert. Dem gegenüber steht der Begriff cis: cis Menschen sind alle die, bei denen das bei Geburt zugewiesene Geschlecht auch gestimmt hat und gelebt wird.

Sexualität vs. Identität

Nicht Binär Flagge

Die Flagge der nicht Binären Leute ist gelb-weiß-lila-schwarz

Der inzwischen nicht mehr so gern gesehene Begriff der “Transsexualität” hat im deutschsprachigen Raum zu Verwirrungen geführt, denn der englische Begriff “-sexual” wurde ins Deutsche fälschlicherweise als “-sexuell” übersetzt anstelle von “-geschlechtlich”. Trans* ist also keine sexuelle Orientierung, wie Homosexualität, Bisexualität oder Heterosexualität, sondern ein geschlechtliches Sein. Die sexuelle Orientierung von trans Personen ist genauso vielfältig wie bei cis Personen.

Wie sieht denn so ein nicht-binärer Mensch aus?

Komplett individuell, es gibt keinen “nicht-binären Look” und keinen Standard wie jemand auszusehen hat. Es gibt nicht-binäre Menschen, die sich sehr feminin geben, oder maskulin oder eben solche die versuchen, davon abzuweichen. Nur weil sich eine Person, die man als Frau wahrnimmt, nicht traditionell weiblich gibt, heißt das nicht, dass sie keine ist. Ungeachtet der eigenen Identität kann man sich darstellen wie es einem am besten in den Kram passt. Und medizinisch gibt es einige Möglichkeiten, die man wahrnehmen kann, um sich in seinem Körper wohler zu fühlen, die manche in Anspruch nehmen und manche nicht. Es wird aber im Allgemeinen als weniger höflich angesehen, Menschen nach ihren medizinischen Hintergründen und Plänen diesbezüglich zu fragen. 

Umgang mit Sprache

Die deutsche Sprache ist alles andere als geschlechtsneutral. Alles worüber man sprechen kann, ist entweder männlich, weiblich oder neutral, wobei das Neutrum in der Regel als entmenschlichend angesehen wird. Für trans Menschen, die sich oft sehr stark mit ihrem Geschlecht auseinandersetzen, ist es in der Regel super wichtig, dass über sie auch richtig gesprochen wird. Bei nicht-binären Menschen gibt es da aber das Problem, dass für sie oft weder männliche noch weibliche Anreden richtig passen und sie sich vielleicht auch nicht mit der objektifizierenden Natur des Neutrums identifizieren. Die richtige Sprache ist immer eine individuelle Entscheidung und sollte also am besten einfach kurz erfragt werden – die meisten Menschen, denen das Thema am Herzen liegt, werden bei einer respektvollen Anfrage auch gerne eine Erklärung geben. Am häufigsten wird man über Pronomen “gegendert”. Pronomen sind Worte, die wir verwenden um ein Nomen zu ersetzen. Ein Nomen könnte eine Person sein, oder ein Tier, Ort oder Objekt, im Deutschen sind diese auch leicht daran zu erkennen, dass man sie auch mitten im Satz groß schreibt. Oft verwenden wir die vollen Namen von Dingen, wenn wir sie beschreiben. Frau Merkel, der Eiffelturm, der Tisch – das sind alles Beispiele von Nomen. (Personal-)Pronomen nutzen wir dann, wenn wir die Namen nicht immer aussprechen wollen. Gängige deutsche Personalpronomen sind ich, du, er, sie, es, wir, ihr und der Plural sie. Es wird aber von Sprachforschen und queeren Aktivist:innen stets an guten Alternativen für geschlechtsbefreite Pronomen / Sprache gearbeitet. 

Persönliche Erfahrungen

Ich selbst bin, wie vielleicht bereits hervorgegangen ist, non binary. Meine Pronomen sind im Deutschen es/sein. So gerne ich auch sagen würde, dass jede:r bei NETWAYS immer alles richtig macht im Bezug auf meine Identität, ist dies leider weder wahr noch realistisch. Wir sind alle Menschen und damit Gewohnheitstiere, die seit jeher in einer binär dominierten Welt leben. Ich habe schon die ein oder andere Email an unseren Verteiler geschickt – “Betreff: In privater Sache”. Habe oft an meine Pronomen erinnern müssen und viele Gespräche geführt. Aber was NETWAYS auszeichnet und besonders macht: Ich werde akzeptiert, die Leute sind neugierig und stellen ihre Fragen offen und diese sind selten zu übergriffig. Ich habe das Gefühl, dass ich existieren darf und meine Mitarbeitenden mir zur Seite stehen, auch wenn sie mich nicht immer verstehen – und fairerweise, das tu ich selbst ja auch nicht immer. Also wenn ihr irgendwelche Fragen habt, gibt es unter nonbinary.ch eine super gute Ressource, um noch mehr zu dem Thema zu lernen. Ihr könnt auch gerne auf mich zukommen, auf Twitter findet man mich als @the_feufeu

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Ethische Nicht-Monogamie

This entry is part 3 of 3 in the series Queerer Monat

Einer unserer Werte bei NETWAYS ist Diversität. Bei uns sind alle willkommen: Egal, ob hetero, bi, homo oder asexuell, ob Frau, Mann oder was ganz anderes, ob cis oder trans, ob eine Partnerperson, keine oder eine ganze Schar, oder irgendwie ganz anders ver-queert. Egal, welche Nationalität oder Herkunft – was zählt, bist Du als Mensch und wir respektieren Dich und sind stolz, Dich bei uns zu haben!

Seit über einem Jahr gibt es bei NETWAYS auch die Gruppe Queerways, die dem Austausch rund um LGBTQIA+ dient. Anlässlich des queeren Monats Juni haben wir eine kleine Serie entwickelt, mit der wir Euch queere Themen näherbringen wollen.

Heute möchte ich im Rahmen des Queeren Monats ein bisschen aus der Welt der ethischen Nicht-Monogamie erzählen. An alle, die das noch nicht von mir wussten erstmal wieder ein kleines Outing – ich selbst lebe auch nicht monogam. Unser liebster Chef der Bernd hat auch schonmal dazu kommentiert: “Ihr dürft gerne alle eure Partner:innen mitbringen auf die Grillfeier, aber wenns mehr als 3 sind bitte Bescheid geben, dann kaufen wir entsprechend mehr Grillzeug ein” und zwinkert mir dabei schelmisch zu.

Beziehungen gibt es in den verschiedensten Formen und Konstellationen. Sie können so unterschiedlich und divers sein wie die Farben des Regenbogens. Ob man nun auf der Beziehungs-Rolltreppe steht oder lieber seinen eigenen Weg sucht oder nicht, welche Art von Beziehunsform zu einem passt, das muss Jedermensch für sich selbst herausfinden – ein richtig oder falsch gibts dabei nur bedingt.

 

Was ist ethische Nicht-Monogamie?

original tweet: hold up...people have all netflix, prime, hbo max, hulu, disney+ and every subscription ever?? with reply: benefits of polyamory

Weniger bekannte Vorteile von mehreren Partnerpersonen. Mehr davon auf Twitter.

Ethische Nicht-Monogamie ist ein breiter Begriff, der jede Form von Beziehung – ob nun freundschaftlich, romantisch oder sexuell – umfasst, die nicht die Form einer exklusiven, monogamen Beziehung zwischen zwei Menschen annimmt.
Es kann befreiend sein, Spaß machen, eine Wahl des Lebensstils sein oder einfach nur eine Art des Seins.

Was jedoch noch wichtiger ist als der Punkt Nicht-Monogamie, ist die Ethik dahinter: Um ein ethisches Beziehungsleben zu führen, müssen alle Beteiligten informiert sein und von sich aus zustimmen.

 

Ist das denn überhaupt queer?

Ethical Non Monogamy flag

Es gibt es auch eine Flagge aus dem LGBTA Wiki

Wenn man “queer sein” als eine Abweichung von den typischen Normen und den ungeschriebenen Regeln, die in zwischenmenschlichen

Beziehungen so herrschen ansieht, auf jeden Fall! Es gibt natürlich auch Menschen, die sowohl heterosexuell als auch nicht trans* sind, die eine Alternative zur Monogamie praktizieren.

 

Es gibt aber sehr viele direkte Überschneidungen mit der queeren Community, wie zum Beispiel den Wunsch, man selbst sein und lieben zu können, wie es sich für jemandem natürlich anfühlt.

Es wird der gleiche Kampf um Anerkennung und um Rechte gekämpft, wie die Legalisierung von Heirat. Es entsteht oft die gleiche Angst vor Zurückweisung, Ablehnung oder Gewalt, sollte man einem neuen Menschen seine Wahrheit anvertrauen.

Und natürlich einer ganzen Welle an Vorurteilen…

 

“Ach, irgendwann findest du schon noch die richtige Person.”

Wäre eines dieser Vorurteile die mich persönlich immer etwas aus der Bahn werfen. Genauso wie “Ach reicht dir eine:r nicht?”, “Wenn du deine andere Hälfte gefunden hast, dann lässt du den Quatsch.” oder “Wenn du deine erste Partnerperon wirklich lieben würdest, würdest du keine weitere Beziehung wollen.”
Manche dieser Aussagen sind vielleicht gar nicht bös gemeint, aber sie können dennoch sehr verletztend rüberkommen – warum solche Fragen doof rüberkommen könnten und was es dazu noch so zu wissen gibt wird in diesem Blogpost ganz gut beantwortet, finde ich.

Respektvolle Fragen, die vermeiden irgendwelche Annahmen zu treffen, können helfen, einen netteren Umgang zu schaffen.

Es gibt unzählige verschiedene Arten von Nicht-Monogamie, und genauso viele verschiedene Perspektiven und Hintergründe. Die einzige Grundlage, die auch hilft vom Betrügen von Partnerpersonen abzugrenzen, ist, dass alle Beteiligten Bescheid wissen und zugestimmt haben.

Es geht nicht primär um Sex, kann es aber. Es geht nicht primär um Liebe, kann es aber. Es geht um Kommunikation und zwischenmenschliche Beziehungen, und darum diese in all ihren Facetten leben zu können.

 

Verschiedene Formen

Wie eben schon angemerkt, die verschiedenen Arten von Nicht-Monogamie sind zahllos. Hier ein kleiner Überblick – man darf diese Liste auch gerne zum Weitersuchen verwenden 🙂

  • Polyamorie: Ein Beziehungskonzept, bei dem Menschen mehrere romantische oder sexuelle Beziehungen zur gleichen Zeit haben können. (Vorsicht bei Begrifflichkeiten! Polygamie wäre die Heirat mehrere Personen, und nicht alle polyamoren Menschen wollen Heiraten. Amorie = Liebe, Gamie = Heirat)
  • Dreier: Ein Paar bringt eine dritte Person mit, um Sex mit ihnen zu haben, ob für einen One-Night-Stand oder regelmäßig. 
  • Swingen: Wenn ein Paar Sex mit einem anderen Paar hat und/oder die Partnerpersonen “tauscht”.
  • Hierarchische Beziehungen: Eine Beziehung, in der es eine Reihe von “primären Partnerpersonen” gibt, in der Regel ein Paar, die sich gegenseitig den Vorrang geben, aber auch “sekundäre Partnerpersonen” haben.
  • Beziehungsanarchie: Ein meist nicht-hierarchischer Beziehungsansatz, bei dem es keine festen Regeln oder Erwartungen gibt, außer denen, auf die sich die beteiligten Partnerpersonen einigen.
  • Offene Beziehungen: Wenn ein Paar oder eine Gruppe von Partnerpersonen derzeit offen für neue romantische oder sexuelle Partnerperson sind.
  • Gelegenheitsdating oder Gelegenheitssex: Wenn man sich zwanglos mit mehreren Personen verabredet und mit ihnen Sex hat, wobei jeder weiß, dass es passiert.
  • Polyfidelität: Eine Beziehung zwischen einer Gruppe von Menschen, in der alle Mitglieder gleichberechtigte Partnerpersonen in der Beziehung sind und niemand Sex mit oder Dates mit Menschen außerhalb der Gruppe hat:
    • Triaden (Dreiergruppen)
    • Quads (Vierergruppen)
    • V (eine Dreierbeziehung, in der eine Person zwei weitere dated, die sich aber nicht gegenseitig)
Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

stackconf wrap up – DAY 3

Day 3 was stackconfs last day, and my first day at the conference.

 

Datacenter on fire

Works on my machine - OPs problem now

Starting off with a meme about burning hardware!

Remember that story about the fire in the OVH Strasbourg Data Center from earlier this year? Kris Buytaert was one of the Engineers on call that night and in his talk he spoke about what it was like to be in the team that was there while the outage happened. He explains how they mitigated the damages and how they recovered from the incident. But he didn’t just talk about this specific incident, but also gave an insight on how to make your infrastructure secure, good business continuity plans and building cloud agnostic stacks that survive disasters.

In this context Christians burned PC also came up again – how does burning hardware come up in every conference?

The burt out remains of Christians PC

The burt out remains of Christians PC

 

The next talk was “Kubernetes Native Continuous Deployment with FluxCD, Flagger, and Linkerd”. Leonid Belkind and Or Elimelech from StackPulse decided to share their way of managing a Kubernetes native CD pipeline with the toolchain you can see in the title. If you feel like you would like some inspiration for building your own, then this talk is for you. They explain the pros and cons – the possibilities and limitations of each tool in their setup and how it all clicks together.

Sharing Open Source Spirit

Marius watching Feus talk in the office

Marius watching the stackconf in the office

The last talk before our coffee break has been my own: Contributing to Open Source with the example of Icinga. The main point of my talk was to invite everyone out there to help out the open source projects that spark your interest or you have been using for years! I showed you around in our repositories, on our website and forum. As contributing is a lot easier than one might think, my main goal is to take away some of the fear people in the community might have!

The coffee break itself was fun as always, with Christian and Bernd just chatting along, getting increasingly confused by the tabletop-games talk in the chat.

 

Right after we hopped into the talk by Michael Coté: Platform as a Product. He talked about how OPs can change the way they work to make life easier for everyone involved in devops and have everyones needs met. He gives some great ideas about how to innovate providing services and transforming away from a service delivery mindset to a platform-as-a-product approach.

Behind the curtains

The stackconf team, ready to snap some pics!

The stackconf team, ready to snap some pics!

On Twitter in the meantime, you can have some insights as to what is going on behind the screnes (or stream, rather).

Julien Pivotto gave us an extensive status update on Prometheus and what there is planned in 2021 and beyond. If you are using Prometheus or considering it, this might be the talk for you! A very in depth explanation on what it has to offer and what has changed in the recent past and a few tips and tricks on how to implement it properly!

Panel discussions

panel discussion screenshot

The hosts were joined by devops experts

I didn’t really sit in with Christian and Bernd for very long in the lunch break – they started off by chatting about snacks and I had to get some myself. Sadly the online conference doesn’t provide the usual snack buffet that you have in person…

When I rejoined the fun, Bernd and Christian were joined by a whole bunch of people for a panel discussion: there were Frank Karlitschek from Nextcloud GmbH, Kris Buytaert from Inuits.eu, Patrick Debois from Snyk, Rosemary Wang from HashiCorp and Serhat Can from Atlassian. A lot of well known organisations and people gathered to discuss all sorts of topics, from “What do you prefer: online vs in person conferences” over “How do we deal with the fact that former decentralised components have an outage” to “How can Open Source survive and be founded if traditional business models?” and “How to find the right balance between complexity and simplicity”.

Learning by doing

live coding

Adam coding live in his talk!

Adam Gordon Bell from Earthly talked about Learning by Pulling Things Apart – and in this case how to pull a container apart to understand how it works. A really nice intro into how the mechanics behind docker work and having a look from bottom up. A live coding session helped understand how to build up a container, which he also detailed in a blogpost that was shared in the chat.

Alberto Marti from OpenNebula spoke about GAIA-X and in his talk he analysed the benefits and challenges associated with Edge Computing, introduced the “True Hybrid Cloud” concept, and explored how this new EU-funded Edge Computing platform contributes to consolidate Europe’s digital sovereignty.

After another short coffee break Anjana Fernando from WSO2 Inc. picked up again with his talk about Microservices Observability with Programming Language: Ballerina. This was a topic that I found very interesting, as I haven’t even heard of Ballerina before. This talk was again centered around an extensive live coding / live demo session which we were walked through nicely.

Big Data and Machine Learning…

… are best when combined. The Weaviate Vector Search Engine aims to do exactly that – we were introduced to the inner workings of Weaviate by Laura Ham from SeMI Technologies with the example of finding the right wine for your seafood dish. Later in the talk we were shown how to actually work with the tool and received some super interesting explanation about how Weaviate connects data purely by proximity, so that it finds fitting results without the search term appearing anywhere in the result datapoint.

After a nice outro by Christian and Bernd we were left with a bit of an empty feeling, but looking forward to the next stackconf – hopefully all together with seeing each other and snacks in Berlin next year! Save the date for the next, stackconf, May 17 & 18, 2022 in Berlin.

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

stackconf online – Recap of Day 03

The final day of stackconf online has now come to a close. It has been a wonderful three days full of interesting talks, fun commentary and lots of learning!

Before I dive into the events of day 03, I want to shed some light on the evening event of day 02, which was all about socialising over long distances via the medium of video games:

For the evening event Christian and Bernd streamed Mario Kart 8 on the Nintendo Switch with an open party, so everyone could join in. We had a bunch of fun races and chats. Different people who were at the location took turns playing. 

Wonderful Morning at Day 03

Starting into day 03 with three cups of coffee, as is customary after the night of the evening event, we got some useful tips about integrating security into DevOps. Jose Ortega talked about integrating security into iteration and pipeline application development with containers and how to secure development environments on top of general best practices.

Ignat Korchagin followed up with his talk “Speeding up Linux disk encryption”. He started off with the basics on encryption, explaining the different kinds and their pros and cons and built up from there explaining more in depth how one should secure ones’ data with LUKS/dm-encrypt.

Next up was Pooja Purswani, with her talk “WebThings: Let’s Make Your Things Smarter“. Contrary to what the title would lead you to believe, she pays special attention to the privacy risks in the web and smart devices. Pooja offers a way out with the current decentralised IoT project from Mozilla which focuses on improving interoperability, privacy and security through standardization.

Containers, Accessibility and Bare Metal Automation

After a short and entertaining break about electric scooters and how docker changed the world, Michel Schildmeijer took over the wheel with his talk “Replace your Docker based Containers with Cri-o Kata Containers for better security”. He gives us insights into the technology of kata containers and how they enable you to have all of the advantages of docker containers, with the added benefits of a more secure environment.

After the lunch break, the ignite talks provided a nice lightweight way back into the conference with their short and informative nature.
The first one “Opensource in Advanced Research Computing, How Canada did it !” by Mohamed Elsakhawy gave us an insight into how Canada’s Advanced Research Computing organizations deal with open source software.
Followed by my talk titled “Flying Blind – Accessibility in our Tools” where I tried to raise some awareness for visually impaired individuals and how they interact with the web.

 

 

The first full length talk after the break was submitted by Rain Leander. The title “Leveraging Procedural Knowledge: From Riding a Bike to Bare Metal Automation” already gives a good idea over what the talk was about: The rate at which people in IT have to deal with new tools and ideas is absolutely insane. The viewers learnt about how to engage with new technologies in an easier manner, by looking at what kind of knowledge you take over from other technologies.

The longer break here was again filled with interesting discourse about a diverse range of topics like horses, twitter voice posts and eco friendliness that were discussed with the audience via chat.

Keycloak and Managed Kubernetes made it round

“Securing Infrastructure with Keycloak” by Rahul Bajaj was all about authentication and authorisation and identity preservation. Rahul explained the different bits and pieces of Single Sign On technologies and the different layers involved. He also demonstrated how he implemented the stack in the Foreman project.

Joerg Schad presented “Challenges in Building Multi-Cloud-Provider Platform with Managed Kubernetes”. A lot of cloud services emerged over time, and building your service cloud-agnostic has grown increasingly difficult. Today, most cloud providers support Kubernetes based platforms. The talk tackled some of the issues you could encounter and how to avoid them.

All in all, I would say that the stackconf online was a really nice conference and managed to capture the spirit of a NETWAYS event rather well, despite there not being a physical location. If you haven’t been able to attend the conference live yourself, you can check out the recordings on YouTube. They should be uploaded soon!

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Introduction to SVG: The Basics

Lately I’ve been spending a some time building SVGs.
When I told my colleagues about what I was doing they asked me to write a short guide about what exactly that is and what you can do with it.
Since I got those questions, i thought that might be interesting for others out there, so here goes nothing:

First of all: what is SVG?

Just like JPEG or PNG, SVG is an image format, which lets us display images or graphics on the web.
SVG stands for ‘Scalable Vector Graphics’ – You might have heard about vectors in a different context already, like maths class or physics maybe?
The concept is the same: there is a direction and a force which helps to describe a path.
This means, that those graphics do not consist of fixed pixel values, but instead they’re a set of directions for whoever renders it (usually the user agent / browser) to follow.

SVG is written in a format that resembles XML, which means you have your image in a human readable plaintext file!

Why does that make it special?

The fact, that the graphics are made up with vectors comes with a bunch of useful qualities:

  • Scalability: It doesn’t matter, if you make the image 30x30px or 3000x3000px, it will stay sharp
  • Responsiveness: Because of its’ scalability you can have it take up whatever space you need it to
  • Programmable: Since your image is basically a text file, you can modify it programmatically as well, which gives it a flexibility unmatched by other common options.
  • Performance: Since we’re not sending out a binary blob of pixels but a text file, there is next to no loading time for the images.

The most common use cases are logos, icons and icon fonts, animations and diagrams.

What does it look like?

This is a simple svg, which we will be building together over the course of this blogpost:

First we define a simple 20×20 “coordinate system”, where 0,0 is in the top left corner.
In the viewBox we define what part of the SVG we will see when it is rendered. Positive x values move to the right and positive y values move downwards.
<svg viewBox="0 0 20 20"></svg> For a better understanding of the slightly mind-fucky topic of the viewBox property, check this out.

 

To start of with we want to draw the head:
For that we just use a <rect> element to draw a rectangle that fills the entire space.
<rect class="body" width="20" height="20"></rect>

 

The eyes consist of two <circle> elements that we position with cx and cy and give them a radius r of 1 unit.
<circle class="eye" cx="5" cy="15" r="1"></circle>
<circle class="eye" cx="15" cy="15" r="1"></circle>

 

When you put everything together the code for it looks something like this:

<svg viewBox="0 0 20 20">
  <rect class="body" width="20" height="20"></rect>
  <circle class="eye" cx="5" cy="15" r="1"></circle>
  <circle class="eye" cx="15" cy="15" r="1"></circle>
</svg>

So far we’d only have a black box, but as you might have noticed, I also added the class attribute into the elements.
This is for styling the SVG via CSS.
It is also possible to style the elements within their tags, but using CSS is usually preferred, since it makes it possible to style images with user themes as well!
This is the CSS:

.eye {
fill: #444;
}

.body {
stroke-width: 2;
stroke: #444;
fill: #f15a22;
}

 

The drawn lines can be edited with stroke  and if the fill attribute changes the colour that fills up the shape:

You can find the pen here.

Drawing our own images

Combining shapes is all nice and cool, but there are a lot more you can do with SVGs – for example create your own shapes.
We can do this with the path element. For it to know what to draw it needs the d attribute in which we can describe the path of the element.

<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>

 

The d attribute has a syntax consisting of a few letters and a lot of numbers, that can look quite scary and unreadable at first, but when we break it down, it should look a lot clearer:
The letters are the commands and the numbers are their passing values.

 

M is the first command used. It’s the move command – so what it does is move the cursor to the position indicated by the numbers and is the starting point for our path.
M1,2 means it starts one unit to the right and two down.

 

The letters for the commands can either be uppercase to indicate absolute values or lowercase to indicate values that are relative to the last point we drew.
While m4,0 means “Move the cursor 4 units to the right”, M4,0 means move it to the position 4,0.

Basic commands for drawing lines

The next commands we want to look at describe straight lines:
L: any direction
H: horizontal
V: vertical
Z: last element for closing path

 

<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>
We’re starting at M1,2.
First line is to position 5,6, so 4 to the right and 4 down with L5,6.
Then a horizontal line to H15.
Another line that goes up and to the right with L19,2.
Down to y value 19 with V19.
All the way left to x position 1 with H1
Finally, we close the path with the Z command.

 

It’s entirely up to you if you want to draw with relative or absolute values, in a 20×20 grid those two would draw the same image:

<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>
<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>

Adding the path together with the circles from our first head and applying the CSS again the image looks like this:

You can find the pen here.

Getting those round corners

The little fox looks a little square still, so we want to edit it to give it some round cheeks.

For this we use the q command, which stands for ‘quadratic curve’.

The q command requires two points, the one around which the curve should be and the point to which the line will go.

We draw the ears like we have before but instead of going down to the 19,19 corner, we stop 2 units further up.

From the point 19,17 we use the command Q19,19 17,19.
This indicates, that we want to wrap around the 19,19 and end at the 17,19 point.

The d value for this fox looks like this:

d="M1,2 L5,6 H15 L19,2 V17 Q19,19 17,19 H3 Q1,19 1,17 Z"

You can find the pen here.

 

Next in the series is going to be a bit more in depth about the more advanced commands and we will extend on the foxes head to make it look like this:
So stay tuned!

If you thought this was fun, maybe you want join our development team, to learn more about the SVGs and the like?

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt es die Development Abteilung bei NETWAYS als Developer und UX Designer und Community Mensch. Seine Freizeit verbringt es hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, seine jogging Runden an der Pegnitz zu drehen, oder damit, mit Freunden und Kollegen Brett- und Pen and Paper Rollenspiele zu spielen.

Veranstaltungen

Sep 21

Icinga 2 Fundamentals Training | Nürnberg

September 21 @ 09:00 - September 24 @ 17:00
NETWAYS Headquarter | Nürnberg
Sep 21

Ansible Advanced Training | Online

September 21 @ 09:00 - September 22 @ 17:00
Sep 28

GitLab Fundamentals Training | Online

September 28 @ 09:00 - September 29 @ 17:00
Sep 28

Kubernetes Quick Start | Nürnberg

September 28 @ 09:00 - 17:00
NETWAYS Headquarter | Nürnberg
Okt 05

Linux Basics Training | Nürnberg

Oktober 5 @ 09:00 - Oktober 7 @ 17:00
NETWAYS Headquarter | Nürnberg