Dynamically Change Svg

[demiculus]

I have many svg files that look alike with a few things different in each of them. Here is an example one.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<polygon fill="#2237FF" stroke="#000B71" stroke-width="30" stroke-miterlimit="10" points="270.073,318.023 270.073,209.126
   319.049,209.126 176.098,57.9 33.148,209.126 82.124,209.126 82.124,462.342 217.969,462.342 270.073,462.342 467.852,462.342 
   467.852,318.023 "/>
</svg>

In pixi.loader I add images like: 

 

PIXI.loader
.add('city_blue', getImagePath('city_blue.svg'),  { crossOrigin: true })
.add('city_red', getImagePath('city_red.svg'), { crossOrigin: true })
.add('city_yellow', getImagePath('city_yellow.svg'), { crossOrigin: true })
.add('city_orange', getImagePath('city_orange.svg'), { crossOrigin: true })
.add('city_green', getImagePath('city_green.svg'), { crossOrigin: true })
.add('city_gray', getImagePath('city_gray.svg'), { crossOrigin: true })
...

The polygon fill & stroke is the only parameters different in this image but my sever needs to load ALL of the images in order for this to work. So my question is 

how can I dynamically change a single svg images parameters so that my website loads faster?

 

 

 

[ivan.popelyshev]

Hack the loading process. 

For v5:

1. Load one svg

2. Look into SVGResource inside the baseTexture,

3. Figure out where string representation is stored

4. Replace colors

5. Create more SVGResource's.

It requires reading SVGResource and BaseTexture sources. Sorry, cant make links, im on mobile on vacation. We can make hacks and new PRs for that file together 

Maybe there will be something wrong with  3,4,5 , in that case please investigate all the steps first and then report back here all the problems youve found. 

Even in case of success, please share your solution, ill post it in pixijs wiki.

 

[ivan.popelyshev]

Maybe related: https://github.com/pixijs/pixi.js/pull/5630

That changes code that you might look into. Especially that test for svg.

[demiculus]

On 5/2/2019 at 1:30 PM, ivan.popelyshev said:

Hack the loading process. 

For v5:

1. Load one svg

2. Look into SVGResource inside the baseTexture,

3. Figure out where string representation is stored

4. Replace colors

5. Create more SVGResource's.

It requires reading SVGResource and BaseTexture sources. Sorry, cant make links, im on mobile on vacation. We can make hacks and new PRs for that file together 

Maybe there will be something wrong with  3,4,5 , in that case please investigate all the steps first and then report back here all the problems youve found. 

Even in case of success, please share your solution, ill post it in pixijs wiki.

 

Damn, I've been trying to figure out where SVGResource is for the past 2 hours (also trying other stuff) now realized it was for v5

I'm afraid to upgrade ? should I? or wait? ?

I'll dig deeper tomorrow

[iamsam]

This approach seems to be exactly what I'm after for a similar problem, but not having any joy finding any SVGResource data. Been at it for hours. Any idea?

I can see there's a baseTexture within the texture itself, but no SVGResource nevermind string representation (other than the URL).

I'm on latest v5.

 

[ivan.popelyshev]

@iamsam in "resource" field of BaseTexture.

How deep are you in pixijs sources at the moment?

Something like combination in looking in variables in runtime and reading source code should work.

I'm sorry but I cant help you guys, I'm too tied with other stuff.

Maybe @JetLu can help you , he's doing those awesome PR's : https://github.com/pixijs/pixi.js/pull/5697

[Olga]

Is there a solution for this in pixi 6?