I slutet på förra veckan uppdaterade jag några av mina ”made in QGIS” logotyper (https://github.com/klakar/qgis_logo) och då slog det mig att man ganska enkelt borde kunna göra en ”generator” för att skapa färganpassade logotyper för exempelvis nationella användargrupper.
Hur det gick till tänkte jag kika på i detta inlägg.
För det första så är SVG formatet ett xml-liknande format som är direkt anpassat för html, vilket gör att det passar väldigt bra att processa med exempelvis javascript på en webbsida.
Det finns ”taggar” och egenskaper för dessa, vilka kan modifieras på samma sätt som om det vore en ”<div>” tagg. Jag tänker mig exempelvis att ändra ”style” egenskapens ”fill” med en färgväljare.
Funktionen som fixar detta skapar ett antal variabler som representerar ”taggar” från både vanlig html och från svg. Sedan så hämtas ”värden” från några av dessa som tilldelas svg objektens ”fill” style.
Det som sedan gjorde allt extra trevligt var att det finns en ”färgväljare” som ”<input>” tagg (type=”color”), som gör det hela mer användarvänligt än med enbart textfält.
Hur färgväljaren ser ut beror på vilken webbläsare man använder. Personligen gillar jag Firefox variant bäst. Safari har jag inte testat, medan Chrome är betydligt enklare. Edge… tja, det fungerar i alla fall. En del mobila webbläsare skiljer sig också från skrivbordsvarianten.
Det som har strulat mest är hur jag skall få till en ”spara” funktion. Det är inte tillåtet att spara till filsystemet från en sida med enbart javascript. Detta är en säkerhetsfunktion. Men det går att generera kod av olika typ som man kan ”skicka” till användaren för nedladdning.
Först skapas en lång textsträng genom att tilldela en variabel värdet från ”outerHTML” för svg taggen med id ”QGIS”. OuterHTML tar även med ”taggen” till skillnad från innerHTML.
Sedan används HTML DOM documentURI egenskaper för att skapa ett objekt av typen ”image/svg”. Jag har inte lyckats ge resultatet en ”filändelse” men de flesta webbläsare känner igen att innehållet som genereras är en bild. Sedan får man själv ange *.svg som filändelse när man sparar, eller döpa om den nedladdade filen.
Olika webbläsare hanterar det här olika. Firefox låter dig välja om du skall öppna innehållet med associerat program eller spara till fil. Chrome laddar hem direkt. Edge försöker (och misslyckas) öppna innehållet i en ny flik, men i Edge kan man högerklicka på bilden och spara den som fil, vilket inte fungerar i Firefox eller Chrome.
I bilden ovan visas sidan som den ser ut i Firefox (Quantum) med färgväljardialog. Du kan själv se sidan på https://klakar.github.io/qgis_logo_generator.htm.
