Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • James 251 posts 1169 karma points
    Aug 06, 2015 @ 14:22

    Selecting an SVG

    Hello fellow Umbracians!

    I'm in the process of cutting a rather nice flat HTML design into Umbraco.

    Some of the service icons on the template use SVG's. I am currently using Archetype for the site to list out site services on the service page.

    In the past it has been easy to select an icon i simply provide a drop down with a list of the class names for Font Awesome icons or something (let's say i choose 15 class names for icons like lightbulb, rocket etc.).

    The problem is however the SVG isnt a simple class its quite complex.

    Has anybody got any experience of making an SVG a "selectable" object in the back end - Even if that is just an illusion.

    Id hate to stick a massive switch statement on page or something like that



  • Carl Jackson 139 posts 478 karma points
    Aug 06, 2015 @ 15:10
    Carl Jackson

    Few ways i can think of...

    • Add the SVG's to the media library as files and allow the user to select them from there, then you can add a standard img with src tag to that file.

    • List item

    Use Css to seta background SVG and then you can carry on using your class method you have been using already?

    If you need the actual SVG source in the page

    • Add a new media type of SVG with a text area to paste the SVG code into and then add a multinode tree picker that allows only that media type and limit to 1 item?
    • Add an actual content type of SVG and keep the icons in the content tree under a "SVG icons" parent

    All of these allow content management without polluting your view with a switch statement.



  • James 251 posts 1169 karma points
    Aug 06, 2015 @ 16:21

    Brilliant mate, thanks for your response!

    Plenty for me to work with here!

  • Tajamal 87 posts 175 karma points
    Feb 24, 2016 @ 14:47

    Do you mean adding Data Type of text area and name that SVG.

    How would you add that to Multinode tree picker ? do you make a new Data Type , i am little confuse here.

Please Sign in or register to post replies

Write your reply to: