SVG Logo tips?

William Flanagan
Hey all,

I'm curious if anyone has suggestions as to how to "output" an SVG that works the way the logo does in Jumpstart. Our designer is having problems producing one that is controllable color and size via CSS.  

She's using Adobe Illustrator. 

Any feedback would be appreciated! 


Chris Oliver
Don't know too much about this myself, but I know fill-current from Tailwind helps take the color CSS property and apply it to the SVG. width and height control the size, and the viewBox is more what the designer used.
Annie O'Grady
This is what I have done to get the width and height and to center.

            <%= render_svg "icons/checkmark", styles: "fill-current text-green-600 m-auto h-20 w-20 " %>

here is what it looks like:
John Quarto-vonTivadar
there's also `stroke-current` which lets you set the stroke width (useful for SVG where there is background 'whitespace' in it (not the JSP logo for example, but for example if looking at the Heroicons, the "truck" SVG, where there's whitespace inside the SVG that need to be the same color as specified in teh SVG's class of bg-red-700, for example.

Just as an aside, for folks like me who with zero prior SVG experience (until we made our first SVG logo today, in fact), I heartily endorse Affinity Designer, a non-Adobe, non-subscription, excellent vector design tool. (We also got/like their Affinity Photo.)

FWIW it's cheap, too... $50 full price, currently a 50% promotion a friend turned me on to. So it was $25 for a genuinely excellent alternative to Adobe Illustrator.
You’re not receiving notifications from this thread.
© 2022 Jumpstart Pro by GoRails, LLC