Add dynamic data to SVG element

Bricks Version: 1.4

Hi,

It’s impossible to use dynamic data for SVG element, so it is impossible to use this element in a loop for displaying custom SVG for CPT.

This is very frustrating because using Image element doesn’t allow to change fill or stroke color.

Does someone know a quick alternative for this???

I guess we could copy the whole svg code in a textarea custom field, but it seems a bit brutal…

21 Likes

Hi Yan,
where is the bug? Either this is a how-to question, or a feature request :wink:

I use ACF and for the SVG a file field (return type file array) and the following code in a code element in my loop:

<?php

  $icn = get_field('custom_svg');
  //print_r($icn);

	if($icn) {
      $icnUrl = $icn['url'];
      $icnID = $icn['ID'];

      echo file_get_contents($icnUrl, $icnID);
    }
?>

Throws possibly a warning in the builder but works in the frontend :sunglasses:
Perhaps there is a better solution.

Best regards,
timmse

7 Likes

Brilliant, thank you!

I was using SVG code in metabox text field because I didn’t want to add http request for each SVG file, but your code renders SVG inline, awesome!
And glad to discover file_get_contents function :slight_smile:

(By the way I don’t understand your $icnID arg, which doesn’t seem to match documentation… I only use url param and it is working perfectly without any warning.)

And yes, you’re right, more a feature request, but as dynamic data is available for bitmap images, I consider this a defect. Anyway, EDITED.

Without the second parameter, a PHP notice was issued. No idea what the reason is, but if it works without too: cool!

Hi @timmse , is there a way to select fill colour for the svg?

1 Like

so still no dynamic svg? great!..

2 Likes

Bump, we need dynamic data for svg element and icon element!

2 Likes

Yes, urgently needed. One of those few things I am heavily missing on nearly every client site.

Thank you so much. This works lik a charm still. Much appreciated. Was going mad, trying different workarounds lol.

1 Like

I use jet engine, and today I got acquainted with such a thing as repeaters and this is exactly what I would like to use on my sites because it gives me the flexibility that I would like, but the problem is that for elements that I want to create for example: a list of price packages or cards advantages, I want to add an icon and connect a dynamic field, so as not to do it manually.
Please add dynamic data for widgets Icon and SVG.

Since we have an SVG element it makes sense for it to support dynamic data so we can use it in queries and load the SVG inline with the HTML to allow for styling of the svg.

2 Likes

Yes, please add Dynamic Data to SVG element.
Mockup:

6 Likes

+1 from me. This is needed badly

+1, Please add this feature, and another to not only upload SVG “image” but can copy-paster SVG html code.

1 Like

@timmse
Your solution works well.
I didn’t get any warning in the builder.

I also attached a class to the CodeBlock and was able to style the SVG.

CSS:
%root% :not([fill=“none”]) {
fill: Magenta;
max-height: 50px;
width: auto;
}

Hi guys,
There is already an official request on the Idea Board, but with relatively few votes:

The +1 from this post are not counted, but wouldn’t make much difference in this case.

The feature requests / imporvements category is more for discussing possible features - the official way is still the idea board.

1 Like

There won’t be many votes; most simply don’t understand how this can simplify the creation of website blocks using repeaters. About 80% of brick users faint when they hear about custom code! And if you tell them about user fields and repeaters, I’m afraid there may be more dire situations here. This innovation should ignore the vote and be added just like a number of functions that appeared in Bricks and not only were no one voted for them, they were not even on the roadmap.

4 Likes

Yes, this is 100% correct. I also do think that this should be a native functionality! Well explained!

1 Like

Guys no need to worry about the votes. There will be dynamic data in code element. I think you could use that in these scenarios once it will be implemented :wink:

In the Bricks Facebook group, every week, you will find a post about this. Which confirms that those who know how to work with dynamic data really need this option, while amateurs don’t even understand how to use what they already have by asking the simplest questions.

This won’t get 1000 votes even in a year…

1 Like