Alternatieve lettertypen

Niet elke browser die een verzoek tegenkomt om tekst in het lettertype DejaVu Sans weer te geven, zal dit noodzakelijkerwijs herkennen. Dit is een klein probleem, want zonder een alternatief lettertype kan een browser gemakkelijk besluiten om een ander lettertype op de afbeelding toe te passen en zo het uiterlijk van de afbeelding voor die kijker te veranderen. De oplossing - de ENIGE oplossing - is om een enkele handmatige wijziging uit te voeren van uw aller, zeer definitieve SVG-versie van uw afbeelding. Laten we zeggen dat u DejaVu Sans wilde gebruiken, maar bereid was genoegen te nemen met een beschikbaar schreefloos lettertype. Nadat u uw Illustrator-bestand in SVG-indeling hebt opgeslagen, moet u dat bestand openen met een teksteditor zoals Notepad of WordPad en voer een zoekopdracht uit op de term font family.

• {font-family="'DejaVuSans'";}
• font-family="DejaVuSans"
• font-family="'DejaVuSans'"
• style="font-family:'DejaVuSans';.

Hier moet u de code bewerken zodat deze als volgt wordt:

• {font-family="'DejaVu Sans'",sans-serif;}
• font-family="'DejaVuSans',sans-serif"
• font-family="'DejaVuSans',sans-serif"
• style="font-family:'DejaVuSans',sans-serif;

Dit kunt u meestal doen met behulp van de functie "Zoeken en vervangen" van het programma (let goed op de locatie van de enkele en dubbele aanhalingstekens, komma's, puntkomma's, spaties, enz.). Een enkel document kan meerdere versies hiervan hebben, dus zorg ervoor dat u controleert of elke instantie van het woord "lettertype" een geschikte alternatieve lettertypefamilie bevat. Merk op dat elke instantie van de woorden sans-serif een koppelteken moet bevatten en niet "onmiddellijk" aan beide zijden mag worden omgeven door aanhalingstekens (noch dubbel noch enkelvoudig, hoewel een dubbel aanhalingsteken aan de rechterkant in sommige omstandigheden acceptabel kan zijn, zie hierboven). Als u dit doet, zorgt u ervoor dat elke browser die dat verzoek om een lettertypefamilie tegenkomt, zelfs als het niet weet wat het is, het op zijn minst een vergelijkbaar lettertype voor uw document zal gebruiken.

Niet-standaard lettertypespecificatie

Abode Illustrator is ook bekend om lettertype specificaties te produceren en goede gedefinieerde en gestandaardiseerde semantiek voor lettergewicht en stijl te negeren. Dit kan ook worden opgelost op een manier die vergelijkbaar is met wat is aangegeven in de subsectie hierboven.

Lettertype groottes

Illustrator is ingesteld om lettertypen alleen te verwerken in termen van pixelgroottes. Helaas kan dit nogal chaotische dingen doen met het daadwerkelijke uiterlijk van uw lettertype wanneer het door een browser wordt gereproduceerd. Als u wilt dat uw lettertype dezelfde grootte en positie heeft als in de Illustrator-versie van uw bestand, moet u het SVG-bestand nog een keer handmatig bewerken terwijl u het hebt geopend in Kladblok. Voer een zoekopdracht uit op het woord "grootte": de enige resultaten die u voor een dergelijke zoekopdracht zou moeten krijgen, zijn die met betrekking tot "lettergrootte". U ziet dat Illustrator aan uw lettertypen een pixelnummer heeft toegewezen. U moet dat getal nemen, het delen door 16 en het vervangen door het nieuwe getal. Vervang vervolgens, direct daarna, de letters px door de letters em. Doe dit voor elk exemplaar van een lettergrootte in uw document. Bijvoorbeeld: stel dat u een bestand maakt in Illustrator, het opslaat als een SVG-bestand en het opent in Kladblok. Vervolgens zoekt u op het woord "size" en vindt u een regel in uw document met de tekst {font-size:10px;} (deze regel verschijnt meestal direct onder de regel "lettertypefamilie" van het bestand, dus het is vrij gemakkelijk te herkennen). U vervangt dan handmatig de 10px door 0.625em, zodat de regel nu {font-size:0.625em;} luidt. U doet dit dan voor elke instantie van het woord "grootte" in uw document. Als u verderop in uw document overschakelt naar een lettergrootte van bijvoorbeeld 24px voor wat grotere tekst, moet u die tekst handmatig wijzigen in 1,5em. Nadat u deze wijzigingen in de lettergroottes in uw document hebt voltooid, moet u het opnieuw opslaan (in UTF-8-codering). Deze twee wijzigingen - lettertypefamilie en lettergrootte - moeten de 'allerlaatste dingen zijn die je met uw SVG-bestand doet voordat u het uploadt naar Commons.

Als u om welke reden dan ook Illustrator gebruikt om uw SVG of AI-bestand in de toekomst, en u slaat het bestand op, gaan uw wijzigingen in de lettertypefamilie en lettergroottes verloren en moeten ze opnieuw handmatig worden ingevoerd, nogmaals, in een teksteditor zonder opmaak. Er is momenteel geen oplossing die Illustrator dwingt SVG-code te produceren die alternatieve lettertypefamilies herkent of om de "em"-lettertypeschaal te gebruiken ten gunste van de "px"-lettertypeschaal. Alleen een laatste handmatige bewerking voorafgaand aan het uploaden kan ervoor zorgen dat deze dingen worden gedaan.

Tekstvakken

Bij het maken van een SVG-diagram is het vaak geschikt om ruimte in een gegeven tekstvak te zetten om de tekst te laten vervangen door een ander, langere woord door een toekomstige redacteur (bijvoorbeeld voor de vertaling van de tekst in een vreemde taal). Alle tekstvakken moeten met dit potentieel in gedachten worden gemaakt en de totale tekstvakgrootte moet ervoor zorgen dat de tekst geen ander tekstvak of een deel van uw onderliggende diagram overlapt. Illustrator stelt de gebruiker in staat om een tekstvak van elke grootte en elke uitlijning (links, rechts of gecentreerd) te maken, ongeacht de grootte van de tekst die in dat vak wordt geplaatst.

Bij het converteren naar een SVG doen zich echter twee problemen voor. De eerste is dat alle tekstvakken worden verkleind tot de minimale grootte die nodig is om de tekst erin te plaatsen (waardoor het doel van het maken van grote tekstvakken in de eerste plaats teniet wordt gedaan). De tweede is dat tekst die langer is dan één regel wordt opgesplitst in afzonderlijke tekstvakken voor elke tekstregel. Als uw tekstvak bijvoorbeeld de woorden 'Bovengrens van brandstofmeter' bevatte en u die tekst in een tekstvak zo had geplaatst dat er op de ene regel van het vak 'Bovengrens van' stond en op de tweede regel 'brandstofmeter', worden dit bij het converteren naar een SVG door Illustrator twee tekstvakken, een met de tekst 'Bovengrens van' en een andere met 'brandstofmeter'. De tekst wordt correct weergegeven in de SVG-versie van de afbeelding. Als u echter probeert het SVG-bestand door Autotranslate te halen, zal het hulpmiddel niet begrijpen dat "Bovengrens van" en "brandstofmeter" deel uitmaken van hetzelfde tekstelement en in plaats daarvan proberen ze afzonderlijk te vertalen. Zolang geen van uw tekstvakken in uw oorspronkelijke AI-bestand bevat tekst die langer is dan een enkele regel, dit zal geen probleem zijn. Dit is echter uiterst onhandig als uw tekst eens langer is. Illustrator heeft geen instelling die de oorspronkelijke grenzen of eenheid van tekstvakcomponenten garandeert bij het converteren van een afbeelding naar SVG-indeling. Het is mogelijk om een tekstvrije versie van uw afbeelding in SVG-formaat op te slaan via Illustrator en het document vervolgens te openen in een ander programma dat SVG kan bewerken (zoals Inkscape) dat tekstvakken niet opnieuw configureert.

text-anchor (uitlijnen)

Hoewel u in Illustrator tekstuitlijning in het midden of rechts kunt definiëren, is het probleem dat bij het exporteren van SVG de uitlijningsinstelling wordt verwijderd en vervangen door de absolute transformatie-/vertaalpositie (met behulp van het standaard tekstuitlijnen) in plaats van te worden geconverteerd naar eigenschap text-anchor van SVG-specificatie. Dit leidt tot een verkeerde uitlijning van tekst die verondersteld wordt te zijn uitgelijnd met het midden of direct na het uploaden naar Wikimedia, omdat het fallback-lettertype andere lettertypemetrieken heeft dan het vooraf gedefinieerde lettertype in het SVG-bestand en het feit dat tekst die door librsvg wordt weergegeven er meestal uitziet als verkeerd uitgelijnd bij schaal. Vanaf Illustrator 2020 neemt het nog steeds geen tekst achor op in de SVG-export.

De enige manier om dit op te lossen, is door alle tekst te wijzigen in de standaard linker tekstuitlijning voordat u een back-up ai-bestand opslaat, het te openen in Inkscape met "interne import" (niet Poppler/Cairo-import) en alle tekst opnieuw uit te lijnen in Inkscape. Het gebruik van niet-linkse tekstuitlijning in Illustrator of importeren met Poppler/Cairo maakt de tekst erg moeilijk om mee te werken in Inkscape.

Dit probleem is geen excuus om tekst converteren naar overzicht vanwege het ongemak van vertaling voor andere bijdragers. Al met al kan het voordeliger zijn om alles vanuit Inkscape of een teksteditor te starten als u in de eerste plaats van plan bent om een SVG-bestand met veel tekst te maken, en alleen vormen te importeren die in Illustrator zijn gemaakt als het te moeilijk is om te doen in Inkscape of teksteditor.

Bevat mijn afbeelding rasters?

Hoe weet u of een afbeelding rastercomponenten bevat? Er is maar één goede manier om erachter te komen: sla het bestand op als een SVG en kijk of er iets opduikt. Probeer deze: begin met het opslaan van uw bestand als een AI-document zonder het te sluiten. Klik vervolgens op "Bestand" en scrol omlaag naar "Een kopie opslaan". Hier kunt u een naam voor het bestand opgeven (Illustrator voegt het woord "kopie" voor u toe aan de bestandsnaam, maar u kunt er desgewenst een andere bestandsnaam voor kiezen). U kunt ook de indeling voor de kopie selecteren: Klik in het vak Opslaan als type en scrol omlaag naar de plek waar SVG (*.SVG) staat. U krijgt nu het dialoogvenster SVG Opslaan te zien. Aangezien u op dit moment alleen maar op zoek bent naar rasters, vermijd het wijzigen van de verschillende menu-items BEHALVE degene die u toestaat om rastercomponenten in te sluiten of te koppelen: zorg ervoor dat dit is ingesteld op Link en klik vervolgens op Opslaan. Wanneer Illustrator klaar is met het opslaan van het bestand, keert u terug naar uw AI-bestand. Open nu de nieuw opgeslagen SVG-kopie van het bestand in Illustrator, klik op Windows en vervolgens op Links. Er verschijnt een vak met alle rastercomponenten ("links") in het SVG-bestand. U moet deze dan opsporen in het AI-bestand (niet in het "tijdelijke" SVG-kopieerbestand dat u zojuist hebt gegenereerd) om ze te repareren. Herhaal dit proces door een problematisch element uit het AI-bestand, waarbij het AI-bestand als een SVG-kopie en vervolgens het SVG-bestand openen om naar koppelingen te zoeken. Sommige van deze links kunnen relatief eenvoudig te vinden en aan te pakken zijn; Anderen kunnen veel ongrijpbaarder blijken te zijn. Uiteindelijk, voordat u de afbeelding naar Commons uploadt, zou u in staat moeten zijn om het bestand in SVG-formaat op te slaan, de kopie te openen, het venster "Links" te openen en daar niets te laten verschijnen. Als u dit kunt, dan heeft u een SVG-bestand gemaakt dat geen rastercomponenten heeft (gefeliciteerd!).

U zult misschien merken dat er items op de lijst van links verschijnen die u niet kunt identificeren in het AI-bestand. Illustrator maakt het niet noodzakelijkerwijs gemakkelijk om te identificeren waar deze componenten zich bevinden of waarom ze rasters produceren. Sommige van deze vormen kunnen zich in lagen bevinden die u helemaal heeft uitgeschakeld, waardoor ze erg moeilijk te vinden zijn. Soms kunt u uit de miniatuurbeeld van de link zien wat het onderdeel is ("Dat lijkt op de handvat die ik in die ene laag heb getekend - is het dat"). Soms is gokken de snelste manier om rasters te identificeren en te verwijderen.

Een van de situaties die Illustrator altijd zal veroorzaken om een SVG-element in een raster te veranderen, is wanneer er gevraagd wordt om een Pathfinder-effect toe te passen op een pad dat een SVG filter bevat. Als u bijvoorbeeld een groep paden probeerde te "trimmen" (via Effects → Pathfinder → Trim) en een van die paden al een soort SVG-filter bevatte, zou dat pad rustig worden omgezet in een nieuwe rasterlaag genaamd "<Image>" (net zo, met een hoekbeurt aan elke kant van het woord) ongeacht welke naam u het eerder hebt toegewezen. Als u zich verbijsterd voelt over het verschijnen van een raster uit "uit het niets", overweeg dan de mogelijkheid dat u ergens Pathfinder hebt gebruikt om een laag met een SVG-filter erin te wijzigen. Als de laag een effect of filter bevatte dat u belangrijk vindt voor de uiteindelijke afbeelding, moet u het nu opnieuw maken. Als u deze fout vaak genoeg maakt, leert u uiteindelijk om niet Pathfinder-effecten toe te passen op lagen met SVG-filters.

Ik heb een raster gevonden, wat moet ik er nu mee doen?

En wat als de raster een visueel element produceert dat u wilt behouden? U heeft misschien een aantal opties, afhankelijk van wat u wilt behouden. Als u een van de Stylize of Photoshop Effects-filters op dit element hebt gebruikt, geef dit dan nu op: deze kunnen nooit correct worden weergegeven als SVG-componenten omdat er geen equivalent SVG-code is om ze te produceren. U kunt op andere manieren proberen soortgelijke effecten te genereren, met behulp van verschillende SVG-filters, maar de Stylize-filters en de Photoshop Effects-filters zijn strikt verboden.

Ten slotte, als de afbeelding rasters bevat, tenzij u deze tijdens de SVG-opslagdialoog in Illustrator "inkapselt/embed" (in plaats van "link") dan zal het bestand niet worden geüpload naar Commons omdat het de geüploade bestanden niet bevat (d.w.z. de SVG afbeelding zal betrekking hebben op objecten die zich niet in het beeld bevinden, en de Commons upload wizard zal dit opmerken en verbieden). Als u in staat bent om een afbeelding te genereren zonder rasters, dan hoeft dit u zich geen zorgen te maken.

Internet Explorer

Internet Explorer werkt niet met de manier waarop Illustrator uitknipmaskers in symbolen plaatst, en negeert deze maskers en hun inhoud wanneer deze in een symbool worden aangetroffen (dit geldt zelfs als het uitknipmasker zelf is "uitgeschakeld" in de Illustrator SVG-versie van het bestand); Internet Explorer zal ook geen symbool met een transparantiemasker weergeven, waardoor het buiten de uiteindelijke tekening wordt gelaten.

Firefox

Firefox kan gradiëntpaden, gradiëntlijnen of filtereffecten niet verwerken binnen symbolen of symboolinsets, en zal dergelijke symbolen tonen zonder de offensieve paden/lijnen/filters (andere, niet-gradiënt/ongefilterde delen van het symbool zullen correct weergeven). Dit is een groot probleem, want symbolen, zoals de paden waar ze van gemaakt zijn, bevatten vaak gradiënten. Mozilla bug 376027 volgt dit probleem.

Firefox zal ook geen transparantie weergeven die verborgen is in een uitknipgroep, en de inhoud ervan uit de geproduceerde afbeelding weglaten, zelfs als het uitknipmasker in de Illustrator-versie van de afbeelding is "uitgeschakeld". Het zal echter geen probleem hebben met het afdrukken van de uitknipmaskers die zich binnen de transparantie bevinden.

Het is dan ook enigszins verrassend dat Firefox in staat is om de verlopen binnen een overvloeiing correct weer te geven, zelfs als een van de twee objecten waaruit die overvloeiing bestaat toevallig een symbool is dat een verloop bevat, hoewel het werkelijke eindpunt van de overvloeiing die het symbool zelf bevat, wordt weergegeven als een leeg object; Dit werkt ook alleen zolang de eindpunten zelf niet beide symbolen zijn: ten minste één ervan moet een regulier pad zijn.

Firefox geeft soms geen aanwijzing voor het knippen (clipping) van maskers binnen symbolen, waardoor de symbolen worden gecreëerd alsof de maskers helemaal niet aanwezig zijn (hoewel ze in Illustrator duidelijk zichtbaar zijn). De redenen hiervoor en de oplossingen hiervoor worden niet hier (of eigenlijk nergens) gegeven. Als u dit probleem ondervindt, bent u op uzelf aangewezen.

Google Chrome

Google Chrome is een browser die in staat is om een SVG-bestand in het beoogde formaat weer te geven, met al zijn uitknipmaskers, transparanten, verlopen, symbolen, enz. Ironisch genoeg maakt dit Chrome de minst bruikbare browser om de universaliteit van een bepaald SVG-bestand vast te stellen: dat een afbeelding correct wordt weergegeven in Chrome betekent alleen dat Chrome zijn werk heeft gedaan - het betekent niet dat Firefox of IE of Safari dat ook zal doen, en de enige manier om ervoor te zorgen dat de SVG-afbeelding correct wordt weergegeven in een groot aantal browsers, is door te proberen deze in elke browser te openen en te kijken of deze er goed uitziet. Er moet worden gezocht naar de kleinste gemene deler bij het maken van een SVG-bestand voor gebruik op Commons.

Er zijn vrijwel zeker veel andere dergelijke crossover-interpretatiefouten, waarvan de meeste het gebruik van symbolen, uitknipmaskers, transparantiemaskers, filtereffecten en/of gradiënten omvatten, hoewel het exacte aantal onbekend is. Omdat het echter belangrijk is dat uw laatste SVG-bestand op verschillende platforms leesbaar is, is het vinden van manieren om problemen als deze te omzeilen een van de uitdagingen van het werken met Illustrator: links naar symbolen kunnen worden gebroken (wat ze omzet in geheugen-ineffectieve paden en lijnen (strokes), maar wat vaak beter is dan de symbolen in verschillende browsers verkeerd worden weergegeven); meerdere gradiënt-opvullingen binnen hetzelfde pad kunnen worden afgebroken in individuele gestapelde paden, hoewel ook met wat kosten met betrekking tot geheugen-efficiëntie; enz.

Line X, Column Y: Attribute id declares a duplicate ID value SomeNameofthatValue

Illustrator heeft de slechte gewoonte om dubbele ID's aan bepaalde dingen toe te wijzen, en hoewel dit geen fouten veroorzaakt in Illustrator, werkt het niet in het SVG-formulier (of beter gezegd, het zal werken, maar veroorzaakt een validatiefout, wat betekent dat het script technisch "ongeldig" is en niet door de "validatie" zal komen). Dit lijkt bijvoorbeeld te gebeuren wanneer u meerdere exemplaren van hetzelfde symbool hebt die u omzet in individuele exemplaren van dat symbool (bijvoorbeeld om het Firefox-probleem met betrekking tot het gebruik van verlopen binnen symbolen te vermijden): Illustrator zet deze symbolen om in exemplaren met een individuele naam die geen symbolen meer zijn, maar objecten, maar geeft mogelijk niet aan elk nieuw object een volledig afzonderlijke ID-naam.

U denkt dat u het SVG-bestand kunt bewerken en de naam van een van de probleem-ID's kunt veranderen, maar dat werkt niet omdat elke ID is gebonden aan een specifiek element in uw afbeelding en het wisselen van namen alleen betekent dat het SVG-bestand nu een verzoek zal hebben voor een aangeduid object dat niet echt bestaat. Bovendien zullen wijzigingen in de SVG-code verloren gaan als u nieuwe wijzigingen aanbrengt in de Illustrator-versie van de afbeelding en het vervolgens weer als SVG opslaat. De enige keren dat de SVG-code direct moet worden aangepast, is wanneer u lettertypefamilies verandert en het lettergrootteformaat aanpast (van de punten naar "em", zoals eerder beschreven).

De eerste stap bij het oplossen van een dubbele ID-fout is om erachter te komen welke objecten in uw afbeelding een dubbele ID hebben. De ID-naam van het element wordt in de foutregel gegeven door de W3C-validator - als u elk van de elementen een naam hebt gegeven toen u ze maakte, zou dit enorm moeten helpen bij het opsporen waar het probleem zich bevindt. Niet iedereen doet dit natuurlijk, dus het kan zijn dat u uw toevlucht moet nemen tot andere middelen. In een recente afbeelding die ik heb gegenereerd hier, zorgde het uitvoeren van de validator ervoor dat er een dubbele ID verscheen voor een object met de naam New_Symbol_13_33. Ik had de verschillende instanties van dit symbool al omgezet in afzonderlijke elementen (omdat dat symbool een verloop bevatte en ik wist dat Firefox het niet correct zou kunnen weergeven als het als een symbool zou blijven), dus ik moest uitzoeken waar de naam van dit symbool voorkwam in mijn lagenlijst. Ik kon ook zien dat ik dit symbool, wat het ook was, minstens 33 keer ergens in mijn afbeelding moet hebben gebruikt. Een manier om het mogelijk te identificeren, is door de SVG-code te bewerken en de eerste of de tweede instantie van dit object/element te verwijderen en te kijken of ik kon zien wat het visueel was wanneer het in een browservenster werd weergegeven. Als ik daar gespot word, kan ik terugkeren naar de Illustrator-versie ervan, het op de een of andere manier aanpassen (door de naam te veranderen, hoogstwaarschijnlijk), het opnieuw opslaan als een SVG en het een tweede keer door Validator laten lopen om te zien of het is opgelost.

Line X, Column Y: Attribute enable-background not allowed on SVG element path at this point.

Onder het venster "SVG Opties" dat verschijnt wanneer u een Illustrator-bestand als SVG probeert te bewaren, is er onder de sectie "Advanced Options" een optie om de CSS-eigenschappen aan te passen. Als dit is ingesteld op "Presentatie attributen" in plaats van "Stijl attributen", kan dit de oorzaak zijn van deze fout (het kan natuurlijk ook op andere manieren worden geproduceerd, maar dit is een bekend probleem). Probeer het bestand te bewaren met CSS-eigenschappen ingesteld op "Stijl attributen", en de fout zal verdwijnen.

Line X, Column Y: Attribute id declares a duplicate ID value SVGID_N_

De "N" hier geeft een getal aan. Deze fout treedt op als een set, samen met de tekst die aangeeft waar u dit SVGID-object voor het eerst een naam hebt gegeven. Het probleem is dat u dat object nooit een naam heeft gegeven en niet kunt zeggen wat het is. SVGID's kunnen worden geproduceerd wanneer u een transparantie gebruikt die een verloopmasker bevat en uw bestand opslaat in SVG-indeling vanuit Illustrator. Illustrator zelf zal waarschijnlijk niet eens iets met de naam SVGID _"wat dan ook"_ bevatten - de naam voor dit object wordt toegewezen wanneer het bestand wordt geconverteerd, niet door u, de persoon die tekent. U kunt proberen dit te omzeilen door het gebruik van de transparantiemaskerfunctie helemaal te vermijden, aangezien deze functie over het algemeen een bekend probleem is. Het opnieuw opstarten van Illustrator en het opnieuw opslaan van het bestand in SVG-indeling kan ook enig effect hebben.