inline SVG code in svg xml

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis WhoCares

Dennis WhoCares

20/02/2019 07:13:08
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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.
 
PHP hulp

PHP hulp

26/05/2019 16:19:18
 
Max vanoosterhout

Max vanoosterhout

20/02/2019 20:09:30
Quote Anchor link
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?

```
<!-- 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>
```
 
Dennis WhoCares

Dennis WhoCares

21/02/2019 10:08:52
Quote Anchor link
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.
Gewijzigd op 21/02/2019 10:22:05 door Dennis WhoCares
 
Adoptive Solution

Adoptive Solution

21/02/2019 10:42:46
Quote Anchor link
Maak een data url :

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

Kan je het zo gebruiken :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<img src="data:image/svg+xml;base64,PCEtLSBpbmxpbmUgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjc0LjMgMjExLjc3Ij4KPHBhdGggZmlsbD0iIzE4YzcwYiIgZD0iTTI3NC4zMSAyNi43TDEwOC4wOCAyMTEuNzcgMCAxMDguODhsMjcuNTQtMjguOTMgNzguMyA3NC41M0wyNDQuNTkgMGwyOS43MiAyNi43eiIvPgo8L3N2Zz4=" style="width: 150px;"/>
Gewijzigd op 21/02/2019 10:45:48 door Adoptive Solution
 
Dennis WhoCares

Dennis WhoCares

21/02/2019 12:42:27
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.