Home Forums Feature Requests File field type: Option to return SVG as code


File field type: Option to return SVG as code

  • Currently the File Type can return as a File Array, File URL, or File ID. What would really be great would be returning SVG as the actual code (putting SVG into templates as code make them styleable with CSS).

    I think returning code would only make sense for SVG.

  • Ha! After a bit more research I see that I can use PHP to get the SVG contents after all,

    <?php $logo = get_field(‘header_logo’, ‘option’); ?>
    <?php echo file_get_contents( $logo ); ?>

    Problem solved! I hope this is helpful for someone else.

  • I was looking for this exact answer! Thanks! However, I need to output the svg for each term in a taxonomy loop. When it comes to that, ACF requires the term variable to be passed on as a second parameter in get_field().

    So I tried this:

    <?php $svgImg = get_field('my_custom_field', $term, 'option'); ?>
    <?php echo file_get_contents( $svgImg ); ?>

    But I get this php error:

    “Warning: “file_get_contents() expects parameter 1 to be a valid path”

    Seems like it´s not an issue related to the order of the parameters as when I swap $term and option, it makes WP blind to what term I´m referring to:

    “Warning: file_get_contents(): Filename cannot be empty”

    $term has been properly defined as I have tested it with:

    <?php $svgImg = get_field('my_custom_field', $term); ?>
    <img src="<?php echo $svgImg['url']? />">

    This last piece of code works. But the previous doesn´t.

    Can somebody help?

  • God! It´s a bit embarrassing when you get the answer seconds after posting the question. But instead of removing it, I´ll just leave it here as it might help someone else, just like arleym´s post helped me.

    Arleym was using a file field. I am using an image field. And I need it to be like that for reasons that go beyond this topic. (obs: wordpress does not support svg in the media library natively).

    Having said that, it wasn´t working because my image field was set to return the object array while it MUST be set to return the URL, instead.

    So the intial code on my previous comment was correct and after changing the value returned by the image field it now works!

    <?php $svgImg = get_field('my_custom_field', $term, 'option'); ?>
    <?php echo file_get_contents( $svgImg ); ?>

    Hope this may help somebody else.

  • I just want to say thank you to both @diogo_wagner and @arleym. This is exactly what I needed.

  • Three years later and this post is still a lifesaver. Thanks for figuring this out guys!

  • Hi, if I wanted to integrate your code with the groups code? How can I do that?

    <?php $annata2 = get_field('anno_2'); if( $annata2 ): ?> <?php echo $annata2['testo_icona_1_anno_2']; ?> <?php endif; ?>


  • Hello,

    We encountered some issues with the file_get_contents() function in our local env.
    The solution we found is the following:

    <?php include get_attached_file(get_field('image_field')['id'] ); ?>

    It will include the svg’s code.

  • Hello,
    thanks for your snippets, but none of your solutions work for me.

    <?php $test = get_field('logo', 'option'); ?>
    <a href="<?php the_field('link'); ?>" target="_blank">
    <?php echo file_get_contents( $test ); ?>

    I’ve tested image field with object array or URL but nothing appears in my a link-tag.
    The fields are correct, because everything works fine for a (simple) display of img logos (example below).

    <?php $test = get_field('logo'); ?>
    <a href="<?php the_field('link'); ?>" target="_blank">
    <img src="<?php echo $test['url']; ?>" alt="<?php echo $test['alt']; ?>" />

    But I want to use inline SVGs to animate the hovers in css.
    Would someone be able to help me please?
    I have been looking for solutions for several days.
    Thank you.

  • I’ve found an(other) solution with Curl.

    <?php $test = get_field('logo'); ?>
    <a href="<?php the_field('link'); ?>" target="_blank">
    <?php $handle = curl_init();
    curl_setopt($handle, CURLOPT_URL, $test);
    curl_setopt($handle, CURLOPT_USERAGENT, 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:13.0) Gecko/20100101 Firefox/13.0.1');
    curl_close($handle); ?>   

    My SVG files are loads inline now.
    Hope this solution could helps someone.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘File field type: Option to return SVG as code’ is closed to new replies.