Dynamic color with ACF and PHP in SVG

ridesirat · June 10, 2025, 7:21pm

Hi

[after some edits and refreshs, it finally works. Not sure what went wrong but this is the final solution]

The color is selected by the user via an ACF color picker.
I’m using a code element with this code (“Parse dynamic data” is on)…

<?php
  
$color = get_field( 'project_color' ); // ACF Color Picker
  
?>

<svg (...) >

  <style type="text/css">
    .icon {
      fill: <? echo $color ?>;
    }
  </style>
  
  <polygon class="icon" points="0.8,0 30.2,29.4 30.2,0 "/>
</svg>

Not sure if it should be escaped but I guess not…

SuatB · July 1, 2025, 11:04pm

You should definitely check if the function get_field exists before you use it. Otherwise it might crash your site when you disable ACF for some reason.

Also why are you not using the default SVG-Item and set the Fill with ACF-Dynamic-Data-Tag in the RAW-Settings?

ridesirat · July 2, 2025, 9:38am

Thanks for the feedback @SuatB

Crashes!? Wow! Didn’t knew about that. And didn’t realise it in ACF docs. Thanks for the warning.
And I will definitely comment this to ACF team.
Well… after thinking a bit, I suppose this is a general PHP thing, nothing to do with the plugin, I suppose.
(I’m not a programmer)

The default SVG option changes all the SVG’s fill and I have to target one specific class of a specific graphic inside it.

SuatB · July 2, 2025, 8:39pm

Yeah don’t write them about that. It’s just a PHP thing… it’s just not allowed to call a non existing Function

by the way you can still do this without the code element like this: