inline SVG code in svg xml
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:
Code (php)
1
<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.
```
<!-- inline -->
<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>
<!-- als een object -->
<object type="image/svg+xml" data="icon.svg"></object>
```
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.
Gewijzigd op 21/02/2019 10:22:05 door Dennis WhoCares
https://dopiaza.org/tools/datauri/index.php
Kan je het zo gebruiken :
Code (php)
1
<img src="data:image/svg+xml;base64,PCEtLSBpbmxpbmUgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjc0LjMgMjExLjc3Ij4KPHBhdGggZmlsbD0iIzE4YzcwYiIgZD0iTTI3NC4zMSAyNi43TDEwOC4wOCAyMTEuNzcgMCAxMDguODhsMjcuNTQtMjguOTMgNzguMyA3NC41M0wyNDQuNTkgMGwyOS43MiAyNi43eiIvPgo8L3N2Zz4=" style="width: 150px;"/>
Gewijzigd op 21/02/2019 10:45:48 door Adoptive Solution
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:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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>
<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.