SVG exercise
Ik heb al eens eerder wat geprobeerd met SVG tijdens de minor en vond het dan ook wel leuk om daar nu wat meer over te horen te krijgen. We kregen hierbij ook de miniopdracht om zelf een svg te schrijven. Ik heb eerst gekeken naar m'n CSS-to-the-rescue folder, waarna ik tot de conclusie kwam dat ik vooral exports uit illustrator had gebruikt en daar op dit moment dus niet zo veel mee had
Ik ben begonnen met een smiley tekenen, maar na het maken van de ogen leek de witte cirkel met zwarte ogen al snel op Baymax, dus ben ik daar naartoe gewerkt.
Hierna heb ik z'n body toegevoegd en ingezoomd op z'n headshot. Het bleek hierbij ook dat ik überhaupt geen classes hoefde te gebruiken voor positionering.
Vervolgens heb ik nog even snel de achtergrond aangepast, titel een achtergrond en border gegeven en deze paarsige kleurtjes via adobe color bepaald;
De code is vrij snel en simpel in elkaar geflanst en niet netjes maar hey, daar is het ook een oefening voor;
<body>
<header>
<h1>svg shape exercise</h1>
<h2>baymax</h2>
</header>
<svg class="baymax" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="buik" cx="50" cy="110" r="70" stroke="black" stroke-width="2" fill="white" />
<circle class="hoofd" cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="white" />
<circle class="oog1" cx="25" cy="50" r="10" stroke="black" stroke-width="1" fill="black" />
<circle class="oog2" cx="75" cy="50" r="10" stroke="black" stroke-width="1" fill="black" />
<line x1="25" y1="50" x2="75" y2="50" stroke-width="3" stroke="black" />
</svg>
</body>
/* BASE */
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
body {
margin-top: 6vh;
font-family: sans-serif;
display: flex;
flex-direction: column;
background-color: #CCCCFF;
align-items: center;
}
header {
background-color: #5F429E;
border-radius: 10px;
box-shadow: 5px 10px #444354;
align-content: center;
padding: 1rem;
}
h1 {
color: white;
font-size: 4rem;
font-variant: small-caps;
text-align: center;
}
h2 {
margin-top: -3vh;
color: white;
font-size: 3rem;
font-variant: small-caps;
text-align: center;
}
.baymax {
height: 40vh;
width: 40vw;
align-self: center;
}
Het ging veel sneller dan verwacht voor mijn doen en vond het wel een leuke opdracht.
Ik prefereer het gebruik van SVG's sowieso boven PNG's, maar een export vanuit Illustrator gebruiken ipv zelf typen zal voor complexere illustraties nog steeds veel sneller gaan. Al is dit minder van toepassing op datavisualisaties natuurlijk.