{"id":8,"date":"2025-03-29T11:21:28","date_gmt":"2025-03-29T10:21:28","guid":{"rendered":"https:\/\/hollands-spoor.com\/?p=8"},"modified":"2025-10-09T09:03:07","modified_gmt":"2025-10-09T08:03:07","slug":"svg-backgrounds","status":"publish","type":"post","link":"https:\/\/hollands-spoor.com\/nl\/svg-backgrounds\/","title":{"rendered":"Asanoha, seigaiha en meer."},"content":{"rendered":"\n
\n
\n
\n
\n

Ik had achtergronden nodig met behangpatronen die je naadloos naast elkaar kunt plakken zoals bijvoorbeeld deze:<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n

Er genoeg voorbeelden te vinden als je zoekt op iets als ‘seamless pattern images’. Als de licentie het toestaat, kun je ze als achtergrond gebruiken van bijvoorbeeld een Gutenberg Groupblock of Coverblock. (In de instellingsdialogen voor de achtergrond van deze blokken kun je aangeven dat de afbeelding niet moet worden opgerekt maar als tegels vullend naast elkaar gelegd, resulterend in daartoe strekkende CSS background-size en background-repeat regels).<\/p>\n\n\n\n

Dit soort patronen wil je naar eigen smaak aanpassen: kleur, lijndikte, vorm, omvang van het herhaalde basiselement, etc. Je kunt natuurlijk ook zelf iets tekenen\/maken in bijvoorbeeld Illustrator of Inkscape (die laatste heeft de voorkeur ivm de opvattingen over geestelijk eigendom die Adobe zijn gebruikers laat onderschrijven). Er zijn ook online generatoren te vinden die dit soort patronen voortbrengen (voeg de woorden ‘online generator’ toe bij het zoeken).<\/p>\n\n\n\n

Hoe dan ook zou het beter zijn als je deze functionaliteit binnen de WordPress blockeditor hebt. Dan hoef je niet steeds te schakelen tussen de generator en WordPress en je hoeft niet steeds patronen te down- en uploaden ( en daarbij eventueel nog exporteren naar een bruikbaar formaat). Hiermee zou je bovendien de gebruiker die dit allemaal te omslachtig vindt van dienst kunnen zijn als deze nieuwe of aangepaste patronen nodig heeft.<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n
\n

Wat dus eigenlijk wenselijk is, is zo’n online svg-patroongenerator, maar dan als onderdeel van de Gutenberg editor. Om dit te bereiken doorliep ik een aantal stappen waarbij ik om te beginnen uitging van onderstaand achtergrond-patroon:<\/p>\n\n\n\n

\n
\n

Het patroon op de achtergrond van dit venster heet Asanoha in Japan, wat hennep betekent. Het lijkt eigenlijk niet op een hennepblad maar dat maakt het niet minder fraai. En trouwens, wie ziet er nou twee vissen in het gelijknamige sterrenbeeld?<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
\n
\n

Met dit patroon in gedachten doorliep ik de volgende acht stappen:<\/p>\n\n\n\n

    \n
  1. SVG Maken<\/li>\n\n\n\n
  2. JSON maken<\/li>\n\n\n\n
  3. JSON doorgeven aan Block Editor<\/li>\n\n\n\n
  4. Extra functies toevoegen<\/li>\n\n\n\n
  5. Inspector Controls toevoegen aan de block-editor<\/li>\n\n\n\n
  6. Renderer maken met template, parameters en functie-resultaten<\/li>\n\n\n\n
  7. Voorinstellingen<\/li>\n\n\n\n
  8. SVG in de achtergrond van het blok plaatsen<\/li>\n<\/ol>\n\n\n\n

    Ten slotte maakte ik wat extra patronen met verschillende voorinstellingen van de parameters. Aan het eind staat daarvan een overzicht.<\/p>\n<\/div>\n\n\n\n

    <\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n

    1. SVG Maken<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n

    Het Asanoha patroon is een herhaling in horizontale en verticale richting van de volgende basisfiguur:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    De onderste helft is hierin dan weer het spiegelbeeld van de bovenste.<\/p>\n\n\n\n

    De afmetingen worden bepaald door slechts 1 parameter: de breedte. De hoogte is \u221a3 x de breedte.<\/p>\n\n\n\n

    Daarnaast kun je vari\u00ebren in lijndikte, lijnkleur en vulkleur en die komen dus als te wijzigen parameter in aanmerking.<\/p>\n<\/div>\n\n\n\n

    <\/div>\n<\/div>\n\n\n\n
    \n
    \n

    Hieronder staat de SVG met een breedte van 80px, een lijndikte van 2px, #FFFFFF als lijnkleur en #000000 als achtergrondkleur:<\/p>\n<\/div>\n\n\n\n

    <\/div>\n<\/div>\n\n\n\n
    \n
    \n
    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"800\" height=\"139\" viewBox=\"0 0 80 139\" fill=\"none\" stroke=\"#FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svg_bg\">\n    <defs>\n        <path style=\"fill:none;\" id=\"asanoha-base\"\n            d=\"M 0,0 80,0 M 0,69.28 80,69.28 40,0 Z M 0,69.28 40,46.18 80,69.28 M 40,46.18 40,0 M 0,69.28 0,23.09 40,0 M 80,69.28 80,23.09 40,0\" \/>\n        <pattern id=\"asanoha-pattern\" patternUnits=\"userSpaceOnUse\" width=\"80\" height=\"138.56\">\n            <use href=\"#asanoha-base\" x=\"0\" y=\"0\" \/>\n            <use href=\"#asanoha-base\" x=\"0\" y=\"0\" transform=\"scale(1,-1)\" transform-origin=\"40 69.28\"\/>\n        <\/pattern>\n    <\/defs>\n    <rect id=\"bg\" width=\"80\" height=\"139\" fill=\"#000000\" \/>\n    <rect id=\"main\" width=\"80\" height=\"139\" fill=\"url(#asanoha-pattern)\" \/>\n<\/svg><\/code><\/pre>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    2. JSON aanmaken<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    Om de waarde van de parameters te kunnen aanpassen in de WP block-editor, maakte ik een JSON object dat aan de block-editor kan worden doorgegeven. Hierin worden de parameters gespecificeerd en ook wordt hierin deze svg als een template doorgegeven zodat de block-editor van parameters en template samen een svg kan maken.<\/p>\n\n\n\n
    De templates waren vooralsnog zo eenvoudig dat een aparte template-engine eigenlijk niet nodig leek. Ik maakte een simpele renderfunctie die met een enkele regular expression parameter-waarden afkomstig van de block-editor in de template kon plaatsen. Niet uit sluiten valt dat in een later stadium gebruik van een wat geavanceerder template-engine de moeite waard zal blijken te zijn.<\/p>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n\n\n\n
    \n
    \n
    Om later nieuwe patronen toe te voegen, plaatste ik het JSON object in een bestand in een aparte map in de plugin directory: svg-tpl. <\/p>\n<\/div>\n\n\n\n
    \n
    Zie: svg-tpl<\/a>\/ op Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    3. JSON doorgeven aan Block Editor<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    Het WP plugin bestand svg-bg.php leest alle bestanden in de template-map en geeft de JSON objecten in een array aan de block-editor door.<\/p>\n\n\n\n
    function get_svgs(){\n\t$svgs = array();\n\t$files = scandir( plugin_dir_path( __FILE__ ) . 'svg-tpl' );\n\tforeach( $files as $file ){\n\t\tif( $file == '.' || $file == '..' ) continue;\n\t\t$file_info = pathinfo($file);\n    \tif ($file_info['extension'] !== 'json') continue;\n\t\n\t\t$svg_json = json_decode( file_get_contents( plugin_dir_path( __FILE__ ) . 'svg-tpl\/' . $file ) );\n\t\t\n\t\tif( $svg_json->template === \"file\") {\n\t\t\t$svg_json->template = file_get_contents( plugin_dir_path( __FILE__ ) . 'svg-tpl\/' . $svg_json->name . '.svg' );\n\t\t} \n\t\t$svgs[] = $svg_json;\n\t}\n\treturn $svgs;\n}\nfunction wp_svg_bg_enqueue_block_editor_assets() {\n\tglobal $wp_scripts;\n\t$svgs = get_svgs();\n    \/\/ Localize the script with the SVG objects\n    wp_localize_script('create-block-svg-bg-editor-script', 'svgObjects', $svgs);\n}\nadd_action('enqueue_block_editor_assets', 'wp_svg_bg_enqueue_block_editor_assets');\n<\/code><\/pre>\n<\/div>\n\n\n\n
    \n
    Zie: svg-bg.php<\/a> op Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    4. Functies toevoegen om te rekenen met parameters<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    De Blockeditor beschikt nu over een specificatie van de parameters en een template voor de SVG. Maar om de SVG te kunnen maken, moeten behalve de parameters ook hier en daar waarden kunnen worden gebruikt die van die parameters worden afgeleid. Zoals gezegd is bijvoorbeeld de hoogte van Asanoha-svg gelijk aan \u221a3 * dx ( de breedte parameter ).<\/p>\n\n\n\n
    Daarom wordt aan de block-editor ook een property met javascript functies doorgegeven.  In het geval van de hoogte van het Asanoha basiselement wordt de functie view.fuctions.svg_height doorgegeven waarmee de hoogte op basis van dx kan worden bepaald. Bij het evalueren van de functie wordt het geheele json-object ook zelf doorgegeven als parameter ‘data’ zodat de functie toegang heeft tot alle parameters in het JSON object:<\/p>\n\n\n\n
    { \"view \": {\n  \"parameters\" : {\n    ...\n  }, \n  \"functions\" : {\n    \"svg_height\": { \"return Math.round( data.dx.value * Math.sqrt(3));\" }\n    ...\n  }\n}<\/code><\/pre>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n\n\n\n
    \n
    \n
    In het bestand svg-tpl\/asanoha.json is het geheel te zien waarmee de blockeditor een op maat gemaakte svg moet kunnen genereren.<\/p>\n<\/div>\n\n\n\n
    \n
    Zie: svg-tpl\/asanoha.json<\/a> op Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    5. Inspector Controls toevoegen aan de Block-editor<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    Nu het JSON object duidelijk kan maken welke Inspector controls kunnen worden ingesteld, kan de edit-block functie worden gemaakt.<\/p>\n\n\n\n
    Hierin wordt als eerste een selectbox gevuld met als opties de namen van alle json bestanden die er in de map svg-tpl zijn gevonden. Ik begon met alleen ‘Asanoha’ maar het is uitdrukkelijk de bedoeling dat er een aantal andere bijkomen. Op basis van het in deze selectbox geselecteerde json object worden vervolgens controls toegevoegd aan het panel in de Gutenberg Inspector controls. De parameter ‘dx’, zoals die in asanoha.json wordt gedefinieerd, heeft als type ‘range’. Dit betekent dat de edit-functie een RangeControl aan het panel toevoegt. Andere properties van ‘dx’ worden gebruikt om de RangeControl nader in te stellen, bijvoorbeeld minimum en maximum waarde.<\/p>\n\n\n\n
    Behalve het type ‘range’ herkent edit.js op dit moment de types ‘string’, ‘select’ en ‘colorpanel’. Daarmee kunnen overeenkomstige controls worden toegevoegd. Als het type niet herkend wordt, wordt het genegeerd.<\/p>\n<\/div>\n\n\n\n
    \n
    Zie: src\/edit.js op Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    6. Renderer maken voor template, parameters en functieresultaten<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    Als de benodigde parameters zijn ingesteld kan met de functie renderTemplate de uiteindelijke svg worden gegenereerd. Aanvankelijk leek een template engine als Moustache voor de hand te liggen maar desgevraagd stelde Copilot een simpele regex voor die inderdaad vooralsnog voldoet. Omdat deze renderfunctie het niet kan herkennen als er een functie wordt opgegeven in plaats van een simpele variabele worden de functieresultaten in expliciet in een tussenvariabele geplaatst zodat bij het renderen alleen variabelen hoeven te worden vervangen en geen functies ge\u00ebvalueerd.<\/p>\n<\/div>\n\n\n\n
    \n
    Zie: src\/templating.js op Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    7. Voorinstellingen<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    \n
    \n
    Ik heb de JSON objecten van de patronen uitgebreid met een property ‘presets’, een array waarin met groepen voorinstellingen van de parameters. Het laat zien dat kleine veranderingen in de parameters tot ingrijpend ander aanzien van het patroon kan leiden. SVG’s die deze presets hebben krijgen een extra select-box in de Inspector Controls.  <\/p>\n<\/div>\n\n\n\n
    \n
    Zie: src\/edit.js<\/p>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n
    Ter onderscheiding gaf ik de groepen voorinstellingen een naam. Meestal net zo vergezocht als Asanoha<\/em>.<\/p>\n<\/div>\n\n\n\n
    <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    8. SVG in een block plaatsen<\/h3><\/path><\/svg><\/path><\/svg><\/div>
    \n
    <\/p>\n\n\n\n
    \n
    \n
    Wat moet er na het renderen met de svg gebeuren? SVG’s kunnen op verschillende manieren in een webpagina worden opgenomen. In principe zou de svg als bestand kunnen worden opgeslagen ( in bijvoorbeeld wp-uploads\/ ) en dat bestand kan dan als achtergrond-afbeelding worden geselecteerd. Dit is evenwel niet zonder problemen want WordPress staat zonder aanpassing  de upload van Svg’s niet toe.<\/p>\n\n\n\n
    Maar een SVG kan ook in de lopende html worden opgenomen en zelfs als achtergrond-afbeelding door een inline css styleregel als hieronder. Dit scheelt overigens ook een extra request aan de server.<\/p>\n\n\n\n
    background-image: url(data:image\/svg+xm, 'urlencoded svg data'). <\/code><\/pre>\n\n\n\n
    Door de svg om te zetten naar een inline-styleregel kan deze in de edit- en in de save-functie aan de blockProps van het Gutenberg block worden toegevoegd.<\/p>\n\n\n\n
    \/\/ get the resulting svg by rendering the template and parameters\nconst svgResult = renderTemplate( mytemplate, myview );\n\/\/ URL encode the svg\nconst svgDataUri = `data:image\/svg+xml,${ encodeURIComponent(\n        svgResult\n) }`;\n\/\/ Add the encoded svg as an inline css background rule\nblockProps = useBlockProps( {\n        style: { backgroundImage: `url(\"${ svgDataUri }\")` },\n} );<\/code><\/pre>\n\n\n\n
    Het aanpassen van parameters zal hierdoor onmiddellijk resulteren in een aangepaste CSS achtergrond stijl zodat de Block Editor gelijk de achtergrond aanpast. Zoals de bedoeling was.<\/p>\n<\/div>\n\n\n\n
    \n
    Zie: src\/edit.js<\/a> in Github<\/p>\n\n\n\n
    Zie src\/save.js in Github<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    Patronen en voorinstellingen<\/h2>\n<\/div>\n\n\n\n
    \n
    Asanoha<\/h3>\n\n\n\n
    \n
    \n
    Dark Night<\/p>\n<\/div>\n\n\n\n
    \n
    Black River<\/p>\n<\/div>\n\n\n\n
    \n
    Star Blazer<\/p>\n<\/div>\n\n\n\n
    \n
    Soup<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Beach<\/h3>\n\n\n\n
    \n
    \n
    Red<\/p>\n<\/div>\n\n\n\n
    \n
    Blue<\/p>\n<\/div>\n\n\n\n
    \n
    Gump<\/p>\n<\/div>\n\n\n\n
    \n
    Free<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Crates<\/h3>\n\n\n\n
    \n
    \n
    Metalic<\/p>\n<\/div>\n\n\n\n
    \n
    Anatomy<\/p>\n<\/div>\n\n\n\n
    \n
    Fragile<\/p>\n<\/div>\n\n\n\n
    \n
    Ant<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Diamond<\/h3>\n\n\n\n
    \n
    \n
    Cardinal<\/p>\n<\/div>\n\n\n\n
    \n
    Leaves<\/p>\n<\/div>\n\n\n\n
    \n
    Polka<\/p>\n<\/div>\n\n\n\n
    \n
    Candy<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Rings<\/h3>\n\n\n\n
    \n
    \n
    Elegant<\/p>\n<\/div>\n\n\n\n
    \n
    Horrible 70<\/p>\n<\/div>\n\n\n\n
    \n
    Awefull 80<\/p>\n<\/div>\n\n\n\n
    \n
    Store<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Seigaiha<\/h3>\n\n\n\n
    \n
    \n
    Pink<\/p>\n<\/div>\n\n\n\n
    \n
    Pink Gradi\u00ebnt<\/p>\n<\/div>\n\n\n\n
    \n
    Lime<\/p>\n<\/div>\n\n\n\n
    \n
    Classic 2<\/p>\n<\/div>\n<\/div>\n\n\n\n
    Geometrisch<\/h3>\n\n\n\n
    \n
    \n
    Nr.1<\/p>\n<\/div>\n\n\n\n
    \n
    Nr. 2<\/p>\n<\/div>\n\n\n\n
    \n
    Nr. 3<\/p>\n<\/div>\n\n\n\n
    \n
    Nr. 4<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n    
    <\/div>\n