Styling SVG paths based on category

One of my fun side projects is Lone Star Lamb, a recipe blog to help promote the lambs my in-laws raise. I also use it to experiment with new tools like Gutenberg and CSS Grid.

Every recipe automatically includes an SVG illustrating which cut of the lamb it came from (example), and you can browse all recipes by cut.

I first created a “lamb cut” taxonomy, and added all the terms. I then found an appropriate SVG and added classes to all the paths describing it:

<svg height="64" viewBox="0 0 95 64" width="95" xmlns="http://www.w3.org/2000/svg">
<path class="body" d="m93.164 11.694c-.064-.067-.353-.473-.659-.909-2.386-3.358-5.044-6.876-6.671-7.502-1.221-.468-1.836-.845-2.341-1.153-.4-.245-.777-.474-1.345-.671-.238-.085-.516-.127-.813-.127-1.054 0-2.183.513-2.473.651-.087.008-.312.025-.623.025-1.141 0-3.335-.218-5.24-1.676-.065-.047-.153-.07-.236-.067-.441.037-1.224.174-1.458.679-.094.191-.137.509.17.933.559.759 1.057 1.468 1.298 1.814-1.927 1.471-5.115 3.642-6.086 3.642-.475 0-1.145.045-1.965.1-1.142.077-2.564.171-4.018.171-.646 0-1.25-.018-1.8-.056-1.477-.1-3.271.35-5.169.833-1.999.514-4.268 1.094-6.544 1.094-2.183 0-6.556-.389-10.789-.771-3.848-.344-8.206-.734-10.244-.734-.127 0-.25.006-.362.006-1.406.046-2.816-.147-4.358-.359-1.465-.193-2.983-.4-4.556-.4-.959 0-1.844.074-2.709.228-3.56.629-11.948 2.882-13.036 10.19-.701 4.751.183 8.225.771 10.53.253.994.453 1.783.453 2.364 0 1.096.723 2.315 1.43 3.5.664 1.13 1.297 2.194 1.247 3.016-.053.788-.659 1.991-1.307 3.273-.782 1.542-1.594 3.136-1.594 4.351 0 .6.054 1.271.105 1.986.136 1.803.289 3.847-.394 4.937-1.118 1.782-1.019 5.739.686 7.815 1.468 1.783 1.968 3.665 2.053 4.024.036.139.156.243.297.256l3.349.313h.033c.159 0 .301-.111.33-.277.081-.402.417-2.534-.939-4.635-1.376-2.139-1.412-5.364-.649-7.253.091-.215.185-.465.291-.739.809-2.103 2.161-5.62 4.952-7.38.08-.046.156-.1.236-.149.772 1.674 3.392 7.709 3.021 12.31-.003.041 0 .086.011.126.142.468.892 2.821 1.935 3.263.565.247.859.788 1.113 1.264.156.295.29.542.476.722l1.012.979c.016.006.972.809 1.854.809.732 0 1.559-.269 1.715-.32.125-.045.222-.158.227-.295.052-.611.241-3.717-.864-4.782-1.253-1.205-2.924-3.276-2.924-7.3 0-4.399.718-7.092 2.249-8.471 1.316-1.186 2.227-2.172 2.563-2.547 1.255.559 8.529 3.658 15.759 3.366 6.776-.276 10.771-1.435 11.765-1.755.785 1.709 2.019 4.683 2.101 5.993.015.307.046.678.079 1.112l.012.124c.179 2.194.45 5.512-.079 7.129-.735 2.239-.288 5.539-.238 5.909.111.745.768 1.445.961 1.645.026.024.057.047.089.064.291.147 1.788.879 2.677.879.512 0 .994-.234 1.329-.643.423-.527.564-1.289.388-2.15-.182-.885-.564-1.763-.87-2.468-.237-.56-.465-1.089-.465-1.335 0-.437.228-2.412.424-4.07l.105-.247c.282 1.378.594 3.045.594 3.354 0 .269.198.663.542 1.338.361.704.858 1.672.799 2.166-.198 1.724.23 2.824 1.274 3.279.962.424 1.956.456 2.503.066.286-.198.611-.604.554-1.405-.13-1.895-.577-3.009-1.541-3.835-.912-.773-1.466-3.604-1.143-4.859.124-.476.201-1.381.295-2.541.167-2.012.4-4.771 1.041-6.535.776-2.159 1.424-3.624 1.665-4.153.141.033.317.057.535.057.953 0 2.908-.519 5.335-3.98 1.583-2.253 2.362-4.294 3.125-6.271.882-2.3 1.717-4.478 3.756-6.55 1.279-1.304 2.026-2.225 2.573-2.9.794-.975 1-1.207 1.541-1.207.208 0 .471.033.874.112 2.471.475 3.241.536 4.2.432.927-.097 1.22-.116 1.985.195.799.332 2.43-.198 2.935-.565.083-.062.189-.087.337-.132.435-.127 1.094-.317 1.964-1.656 1.192-1.837-1.042-5.167-1.491-5.594z"/>
<path class="leg" d="m23.802 18.151-5.081 1.998-12.137.443c.199-2.953.459-6.038.699-6.444.589-.656 5.95-3.27 6.766-3.391.031-.006.082-.009.141-.012 1.124.002 5.754.605 8.495.981.4 2.277.8 4.587 1.117 6.425zm-4.84 2.8 4.987-1.959c.283 1.653.464 2.777.479 2.894-.009.053-.915 5.653-5.95 10.603-.436.43-.883.877-1.336 1.34-.332-.33-.791-.501-1.35-.501-.785 0-1.509.341-1.509.341l-5.66 2.365c.073-.56.092-1.101-.113-1.436-.261-.447-2.438-6.004-2.407-6.624.045-.2.099-1.041.215-3.069.051-.896.124-2.14.213-3.466l12.307-.458c.034 0 .091-.018.124-.03z"/>
<path class="belly" d="m46.724 28.939 2.773-4.766c-2.141.137-9.198.578-13.741.678-4.292.097-7.418-.947-8.624-1.43.021.688-.089 1.871-.858 3.059-.959 1.468-2.213 3.351-2.542 3.847.136.571.608 2.65.612 4.134l1.608 1.214c5.65 2.016 10.84 3.042 15.422 3.038 4.341.004 6.847-.943 7.611-1.284-.429-1.377-1.831-6.518-2.293-8.225-.024-.091-.013-.182.032-.265z"/>
<path class="saddle" d="m36.779 22.48c.08-3.406-1.261-8.435-1.686-9.924-4.127-.488-8.255-1-9.653-1.174.785 3.423 1.713 8.771 1.903 9.89 2.413.791 6.339 1.096 9.436 1.208z"/>
<path class="loin" d="m46.771 22.28c2.568-.275 3.974-1.095 5.463-1.959.546-.32 1.164-.682 1.858-1.017 2.089-1.007 6.936-2.919 8.477-3.521l-1.282-4.109c-1.603.31-5.565 1.059-6.506 1.126-.165.012-.5.045-.948.086-1.97.185-6.076.57-9.316.57-.959 0-1.771-.035-2.43-.1-1.677-.183-3.854-.43-6.089-.695.505 1.836 1.693 6.548 1.62 9.848 1.038.024 1.941.033 2.612.033 2.561-.002 5.068-.1 6.541-.262z"/>
<path class="shank" d="m14.626 34.435-6.166 2.576c-.202.952-.688 3.132-1.446 6.512l.697.621c.999-1.15 5.008-5.753 8.844-9.715-.179-.181-.43-.266-.765-.266-.553 0-1.106.241-1.164.272z"/>
<path class="shank" d="m56.833 44.879 1.731-.091c.098-.962.551-3.719 2.583-7.225-1.825.45-4.792.553-6.186.571.913 2.341 1.666 4.765 1.872 6.745z"/>
<path class="shoulder" d="m63.563 18.216-8.612 3.397-4.06 7.809c.506.928 2.259 4.23 3.742 7.883 2.47-.023 6.264-.27 7.212-.874.982-1.508 2.253-3.123 3.905-4.773l4.595-3.761c-.602-.501-1.838-1.551-3.7-3.235-2.208-1.993-2.894-5.161-3.082-6.446z"/>
<path class="neck" d="m64.251 11.222c.386 1.281 1.476 4.968 2.436 8.244.929 3.18 4.656 5.05 5.865 5.579 1.046-2.666 5.358-6.49 6.776-7.693l-7.777-8.536c-1.971 1.546-5.85 2.205-7.3 2.406z"/>
</svg>
view raw lamb.txt hosted with ❤ by GitHub

Inside the recipe I display the SVG inside of a <span> with classes for each term attached to the post:

<?php
/**
* Lamb Cuts
*
*/
function ea_recipe_lamb_cuts() {
$cuts = get_the_terms( get_the_ID(), 'lamb_cut' );
if( empty( $cuts ) || is_wp_error( $cuts ) )
return;
$classes = wp_list_pluck( $cuts, 'slug' );
$classes[] = 'lamb-cuts';
echo '<span class="' . join( ' ', $classes ) . '">' . ea_icon( 'lamb' ) . '</span>';
}
add_action( 'cookbook_recipe_top', 'ea_recipe_lamb_cuts' );
/**
* Display Icon
*
*/
function ea_icon( $slug = '' ) {
$icon_path = get_template_directory() . '/assets/icons/' . $slug . '.svg';
if( file_exists( $icon_path ) )
return file_get_contents( $icon_path );
}
view raw functions.php hosted with ❤ by GitHub

And using SASS, I style the SVG based on matching classes:

/* Lamb Cuts
--------------------------------------------- */
.lamb-cuts {
width: 100%;
display: block;
margin-bottom: 20px;
max-width: 300px;
svg {
fill: $blue_1;
width: 100%;
height: auto;
}
&.loin .loin,
&.belly .belly,
&.leg .leg,
&.neck .neck,
&.saddle .saddle,
&.shank .shank,
&.shoulder .shoulder,
&.ground path:not(.body),
&.bones path:not(.body) {
fill: $red_1;
stroke: $white;
}
}

I think this is a fun way to add context to a recipe, and am looking forward to finding ways to use this path styling approach in client projects.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Hans says

    It is indeed a fun way to attach context to a page and a nice example on how to do it, although I’m not sure to what extend adding a visual reminder that connects a recipe to the animal that is killed and slaughtered for it. Showing the animal and which part that is cut, might invoke feelings of quilt and reduce enjoyment of the visitor. so it might in this case be a double-edged sword when one tries to sell enjoyment and finds a visual element results in a reminder that can trigger some of the visitors having that enjoyment reduced. That’s another aspect of making visualizations. It is a nice example though on contextualization.

    Thanks for sharing the technology.

    Cheers, Hans

    • Bill Erickson says

      Thank you for the thoughtful reply.

      I can see how some visitors would be discomforted by it, but they aren’t the target market. The true purpose of the website is to sell whole animals to consumers who will discuss with a butcher how they want it broken down. If someone is discouraged by an illustration, they definitely won’t be comfortable speaking with a butcher.

      Everyone has different food preferences. It’s helpful to understand what can be made from each cut so you can have your lamb butchered to your specific needs. Some would like everything ground for burgers, others prefer steaks/chops, and others still prefer roasts. My goal is to show many options for every part of the animal.

      I understand this approach to eating doesn’t appeal to all – others prefer to be as disconnected from their meat as possible. But some (like myself) prefer to support the raising of healthy and happy livestock, and to honor the animal by using every part.

      • Hans Schuijff says

        Hi Bill,

        Thanks for responding, i hadn’t received notice of you reply, so i just saw it. I agree with your reaction. It might also be a cultural difference between America, where guns, hunting and weapons are more mainstream, an my country. Although I do eat meat, I wonder if I would do that if it meant actually killing animals myself. I like to be kind.

        But given that we hold animals for food and other things, i tend to agree with your last sentence. We should care for the live we give animals while they are alive and treat them wit some kindness and dignity.

        Like the wise animal farmer of Polyface farm states “Our animals live a happy life, except for one day”, Joel Salatin has done a lot well in and we can learn from someone like him. He also is right when he states that if we look at animals as objects, it doesn’t take much time until we will see ourselfs as objects too and treat each other badly. He has build systems in which it makes sense to take care of the land and forests and our animals at the same time, and he makes profit in doing so. I like people like that.

        Tempel Grandin also has done a lot of good for cattle and how they are treated by the industry. She expresses that we have the obligation to take care of our animals, even though they are meant to be food.

        But of course your article was not about animal welfare but about coding, and for that I thank you. You seem a kind soul too.

        Hans

        p.s. do you know a checkbox without any text is shown below the comment form, above the submit-button? Inspector says that it is the cookie consent and has a label-text, but “display: none” prevents it from showing ( in _helpers.scss line 59 apparently ). I use firefox (latest version).

  2. vineet says

    Valuable information, I have already been searching for several times but this one is the correct one! You have just received one shared!