Systemmanual Corda/Instrato 7.0 – administrator
   [For Judith: CordaFont-eksempler « (⇧) » Dokumentgrupper]

Bruk av SVG til tekstflyt

SVG er et xml-basert filformat som beskriver vektorgrafikk. Du kan åpne en svg-fil i et vanlig tekstbehandlingsprogram, og se hva den inneholder. For at Corda skal kunne bruke svg-koden, må den minst inneholde følgende informasjon: En «svg»-tag med høyde og bredde, og en «path» med verdier i «d». Den enkleste formen er som denne:

<svg width="419.5" height="595.3">
<path d="M135.7,581.5H18.1V517h117.5V581.5z"/>
</svg>

Dersom du har tilgang til Adobe Illustrator kan du lagre direkte som svg. En slik svg vil inneholde mer informasjon, men Corda bruker fortsatt kun attributtene som vist over. I noen tilfeller vil svg-fila bruke «viewBox» i stedet for høyde og bredde (avhengig av Illustrator-versjon). Corda håndterer også dette.

Opprett dokument i Illustrator
Opprett et dokument
i Illustrator og tegn bane(r)

Lagre som SVG
Lagre som SVG og
kontroller/koper svg-kode

Tekst på path
Lim inn svg-koden
på elementet i Corda

Resultat
Resultat

Resultat
Eksempel: Samme path
på tekstfelt og tekstboks

En svg fra Illustrator kan se sånn ut:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 419.5 595.3" enable-background="new 0 0 419.5 595.3" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M135.7,581.5H18.1V517h117.5L135.7,581.5L135.7,581.5z"/>
</svg>

Path fra Illustrator

Lag deg et Illustrator-dokument som har samme format som den tekstboksen du skal ha tekstflyt i, eller som den malen hvor du skal benytte tekst på path. Dette gjelder særlig for tekst på path. På tekstboksen kan du velge om svg-en skal skaleres til boksen eller ikke.

Tegn en bane der hvor du ønsker at teksten skal flyte. For tekstflyt i tekstboks kan du gjerne tegne flere baner, f.eks. flere rektangler, sirkler eller andre former hvis teksten skal flyte rundt flere elementer.

Når du er fornøyd, velg Lagre som… › SVG. I dialogvinduet som da kommer opp, går det fint å bruke standardinnstillingene som er satt i utgangspunktet. Det er viktig å sjekke at svg-fila lagrer koordinatene som «path», ikke som «rect» eller «polygon» eller noe annet. Dette kan du sjekke du når du i lagre som-dialogen fra Illustrator klikker på knappen «SVG Code…». Dette åpner svg-koden i et tekstbehandlingsprogram.

Dersom du bare har rektangler og rette streker i fila, vil svg-en fra Illustrator vanligvis lagres med rect eller polygon i stedet for path. Når dette skjer må du gjøre følgende før du lager som svg: Merk alle objektene og velg fra menyen: Object › Compound Path › Make (ctrl+8 / ⌘+8)

Når du nå lagrer som SVG, vil koordinatene lagres som «path». Koden kan da kopieres som tekst direkte inn i svg-feltet på tekstboks eller tekstfelt.

Tips: I Illustrator CC kan du også ganske enkelt bare kopiere objektet i Illustrator uten å gå via lagre som-dialogen. I utklippstavla blir dette håndtert som ren svg-kode. Og du kan derfor bare lime inn dette i svg-feltet i Corda.

Path fra Photoshop

Du kan også benytte photoshop til å lage baner som kan brukes av Corda. Lag et bilde som har samme format som tekstboksen eller malen (for tekst på path). Lag én eller flere baner, lagre dem og definer som clipping path. Lagre som f.eks. jpg. Bildefila kan lastes opp til en tekstboks, og svg-koden kan trekkes ut fra denne. Merk at denne funksjonen kun håndterer baner som er definerte som clipping path i Photoshop.

Dersom din Corda kjører på en server med en eldre PHP-versjon, vil det kun være mulig å laste opp bilde med clipping path til tekstboks. Utvidet funksjonalitet for svg krever PHP 5.4 eller nyere.