inline SVG code in svg xml

Door Dennis WhoCares op 20-02-2019 07:13

2.380 views

Goede morgen allemaal,

Het is weer een tijdje geleden, ik ben enorm druk laatste tijd.
Onlangs heb ik klachten gekregen dat de pdf's die ik genereer met 'dompdf' van een te lage kwaliteit zijn en niet voor alle doeleinden bruikbaar zijn bij een drukkerij.

Hierop kan ik uiteraard een svg xml genereren, wat wel aardig lukt, maar nou loop ik tegen iets aan wat ik niet zo 1-2-3 kan vinden.

Ik heb enkele svg bestandjes (logo en wat decoratie) welke ik van de designer heb gekregen.
Ik gebruik die nu in m'n generator om dus een soort van label te maken, maar uiteraard is dit dan niet 'offline' te gebruiken omdat ik de plaatjes (logo,decoratie) inlaad.

Is er een manier waarop ik de code van het logo en decoratie als een... soort van object kan inladen in de generator en gewoon een x,y kan geven zodat ik het kan verplaatsen?
Ik kom hier geen juist antwoord op vinden. Zoiets wat je ook gewoon in normale html kan doen net als:


<object type="image/svg+xml" data="data:image/svg+xml;>>SVG_DATA<<"></object>

Maar dan in de svg xml zelf, zodat het logo en decoratie zelf al in de svg xml staat? (dat t geen externe sources meer zijn)

Ik weet niet of bovenstaande duidelijk maakt wat ik probeer te bereiken, ik hoop het wel iig.

Max vanoosterhout

20-02-2019 20:09

Waarom zijn je SVGs niet offline te gebruiken? Je kan toch, net als met afbeeldingen die niet een SVG zijn, deze in een <img> tag of zelfs inline neerzetten?

```

<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 274.3 211.77">
<path fill="#18c70b" d="M274.31 26.7L108.08 211.77 0 108.88l27.54-28.93 78.3 74.53L244.59 0l29.72 26.7z"/>
</svg>


<object type="image/svg+xml" data="icon.svg"></object>
```

Dennis WhoCares

21-02-2019 10:08 gewijzigd op 21-02-2019 10:22

Hi Max,

ik heb het nog niet echt kunnen testen nog, omdat ik snel een testopzet gemaakt heb.
Deze maakt idd gebruik van de <image> tag, maar als ik dit dan opsla als svg is de image dan geen externe resource.. ?

Volgens mij wel namelijk, en als ik dan geen internet heb, of niet op het interne netwerk zit dan is deze externe source niet te bereiken.
Het gaat hier om een svg image uit illustrator welke ik wil gebruiken in mijn eigen svg.

Ik wil dus 'raw svg data' in een object plaatsen, zodat ik dit object kan positioneren. zonder dat ik al die elementen hierin apart moet verplaatsen.

Ik kom hier nog op terug.

Adoptive Solution

21-02-2019 10:42 gewijzigd op 21-02-2019 10:45

Maak een data url :

https://dopiaza.org/tools/datauri/index.php

Kan je het zo gebruiken :

<img src="data:image/svg+xml;base64,PCEtLSBpbmxpbmUgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjc0LjMgMjExLjc3Ij4KPHBhdGggZmlsbD0iIzE4YzcwYiIgZD0iTTI3NC4zMSAyNi43TDEwOC4wOCAyMTEuNzcgMCAxMDguODhsMjcuNTQtMjguOTMgNzguMyA3NC41M0wyNDQuNTkgMGwyOS43MiAyNi43eiIvPgo8L3N2Zz4=" style="width: 150px;"/>

Dennis WhoCares

21-02-2019 12:42

Hi all,

Ik bedoelde dus een bestaande svg plaatje 'inline' gebruiken in een nieuwe svg xml. (de svg file zelf)

binnen de <svg></svg> kun je gewoon nog een svg toevoegen blijkt:


<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="red" fill="grey" />
  <circle cx="150" cy="50" r="4" stroke="red" fill="grey" />

//een geheel svg object in aparte 'group' 
  <svg x="100" y="0">
    <circle cx="5" cy="5" r="2" stroke="blue" fill="grey" />
  </svg>
</svg>

Dit werkt zoals ik verwacht en heeft de 'externe source' van <image niet meer nodig.

Reageren

Inloggen om te reageren