NemProgrammering.dk logo
nordicway webhotel

SVG og HTML5

HTML5 kursus | Lær at anvende HTML5
WordPress hjemmeside hjælp

Information om denne video

Underviser: Joakim Børlum Petersen, www.Snowhat.dk

I denne gratis danske video vejledning vil vi kigge nærmere på SVG i HTML5. Dette vil vi gøre ved at vise dig et par små eksempler på, hvad der er muligt med SVG i HTML5.

Selvom canvas elementet er en af de helt store nyhed i HTML5, så er en gammel ven i form af SVG også sluttet sig til rækken af nye teknologier i HTML5. SVG har eksisteret i nogen tid, men det er aldrig lykkedes at få tilstrækkelig støtte omkring SVG til at gøre det til en de facto standard. Alle browsere er dog med på vognen nu og derfor kan du sikkert bruge SVG grafik på din hjemmeside.

Men hvad er SVG så for noget?

Du går ikke helt galt i byen hvis du tænker på det som et programmeringssprog til grafik. Dette betyder dog at du må ignorere en lille detalje, nemlig at den er baseret på XML. Men hvis du ikke har noget imod at lave grafik ved hjælp af XML, så kan sagtens opfatte SVG som et grafisk sprog.

I denne video vil du lære meget mere om hvad SVG indebærer og hvordan du får det brugt.

Herunder finder du koderne der bliver lavet i videoen - Kopier dem gerne!

Video tags:

Denne video relaterer til emner såsom: HTML5 kursus, HTML5 guide, Gratis HTML5 undervisning, HTML5 video tutorials på dansk, HTML5 introduktion, muligheder med HTML5, HTML5 - den nye standard

Her har du kildekoden

<!DOCTYPE html>

<html>

<head>

    <title>SVG  test</title>

</head>

<body>

    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">

        <text style="font-size: 48; font-family: sans-serif" x="5" y="150">

            Hello World!

        </text>

        <rect x="5" y="10" width="300" height="100" style="fill: blue;"/>

        <circle cx="30" cy="50" r="20" style="fill: yellow"/>

    </svg>

</body>

</html>
        

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!