svg macro

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Yael Manshary 17 posts 57 karma points

Sep 01, 2015 @ 13:16

Hi There,

I've been trying to make a dynamic SVG code field but but all I get is a line "umbraco.MacroEngines.DynamicXml".

I specifically need it to be an SVG code field rather than an image upload field for CSS reasons.

This is my macro code:

@foreach (var childPage in Model.Children.Where("Visible"))
            {
                <div class="col-md-4">
                    <a class="benefits-list" href="@childPage.Url">
                        <span class="benefit-icon">
                            @childPage.Svg  <!-- this is the svg code field -->
                        </span>
                        <span class="benefit-title">
                            @childPage.Name
                        </span>
                    </a>
                </div>
            }

In the content editor I just use a "textbox multiple" field.

Is there a way to do this?

Thanks for reading,

Yael

Copy Link

Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Sep 01, 2015 @ 13:37

1

Hello Yael,
You are most likely to run into problems of storing the XML data for your SVG inside a multiple textfield property type on your node.

This is because under the hood the content cache for Umbraco is stored as XML and with SVG essentially being a form of XML data. Umbraco is most likely getting confused between the XML it think it needs to store & save inside the umbraco XML content cache file found at /app_data/umbraco.config

I am not sure what advice to give on how to avoid this error. Could you not upload a SVG into the media section instead & link to the file as opposed to the raw SVG XML pasted into the text field?

Cheers,
Warren

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Sep 01, 2015 @ 13:51

0

Hi Yael

Can you tell us about the scenario where you need to things this way? What are the reasons that you don't want to use SVG files? It would be nice to know the issue with that approach before diving into further suggestions about how to go about it I think :)

Looking forward to hearing from you.

/Jan

Copy Link
Yael Manshary 17 posts 57 karma points

Sep 01, 2015 @ 14:01

0

Hi Warren and Jan,

Thanks for the quick reply, first of all.

The reason I need it to be a code and not a file is because I want to be able to relate to the SVG differently in CSS depending on the page I show it in (I need to use it on multiple locations), specifically for fill color.

I don't know a way to do this in a SVG file, unfortunately. If there isn't a simple way to use a macro for SVG code I will upload different SVG files, I just hoped there is a more elegant solution :-)

Thank you! Yael

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Sep 01, 2015 @ 14:07

1

Hello Yael,
I am no front end expert, but I believe if you give the SVG XML IDs this will allow you to target the element in CSS and change the fill colour via CSS.

Which means you can have one generic SVG and with CSS change the fill colour as required.

https://css-tricks.com/cascading-svg-fill-color/

Thanks,
Warren

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Sep 01, 2015 @ 14:23

0

Hi Yael

In addition to what Warren writes above I'm wondering if it's possible for you to make an SVG sprite like Chris describes here https://css-tricks.com/svg-sprites-use-better-icon-fonts/ maybe? Then you should be able to include the SVG sprite in your template and also be able to modify the colors etc. depending on the use case using CSS.

I hope I get you right :)

/Jan

Copy Link
Yael Manshary 17 posts 57 karma points

Sep 01, 2015 @ 14:54

0

Hi Guys,

Warren, thank you but you can change the CSS only with SVG code. Once inside an IMG tag it doesn't work. Not as far as I know and tried and searched... :-)

Jan, the link you attached is very interesting and could be a kind of solution.

One think I forgot to mention about why I prefer SVG code and not a file is that it also saves calls to the server (there are no image files to call to), especially since I need to use many SVG icons per page. So it really is a loss to not have it in Umbraco. Oh well... :-)

Thanks a lot guys!

Yael

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Sep 01, 2015 @ 15:08

0

Hi Yael

But the SVG's you need...are they only meant for styling purposes? If so then I don't think having then inside Umbraco makes any sense unless it's the intention editors should be able to manage them somehow. That can of course make sense for stuff like company logos etc. - But if that's not the case then I think you should store it outside of Umbraco and then make use of SVG sprites - Perhaps you can even benefit from using the www.grumpicon.com generator, which makes png fallbacks and base64 encodes the files so that you avoid multiple HTTP requests for the images.

It's also possible to set up and automate using grunt depending on your workflow of course.

/Jan

Copy Link
Yael Manshary 17 posts 57 karma points

Sep 01, 2015 @ 15:27

0

Hi Jan,

Not sure I understand what you mean about it not making sense to have the SVG inside Umbraco. I mean, I find it very comfortable attaching the SVG code (or uploading an image) for each node and then just printing it automatically via macro.

Anyway, I will look further into www.grumpicon.com generator you mentioned or use a Sprite/icon font solution.

Thank you!!

Yael

Copy Link
Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Sep 01, 2015 @ 15:31

0

ello Yael,
I think Jan is referring to the end client who will be using the Umbraco CMS. Unless you are the client then most clients are non technical and probably won't know how to edit an SVG file or what a SVG is even.

So Jan was making the point if its not going to be edited often or changed by the client then why make the content editors life complex & confusing.

Correct me if I am wrong Jan?!

Again it seems like Jan has given you some pointers & seems like you may have found a solution to your original problem.

Thanks,
Warren

Copy Link
Yael Manshary 17 posts 57 karma points

Sep 01, 2015 @ 15:41

0

Hi Warren,

Oh OK, it's definitely not for an end client editing purpose. It's only for convenience sake (not to have to setup dozens of Umbraco fields but only a few and then printing it automatically via macro foreach loop).

Jan has definitely given me some excellent pointers. I will dig into it and see what is the best solution for me.

Thank you,

Yael

Copy Link
is working on a reply...

Please Sign in or register to post replies