 #  Fun With SVG Graphics 

 

So I did a bunch of [SVG](/blog/personal/cock-cock-boom-logo-work "CockCockBoom.com (Logo Work)") work I donated to a political candidate and (at the time) frequent media guest commentator, Raven Harrison, and this is a product of that work.

The site I built isn't up anymore, and the new host is either not willing or not able to implement these features. I recreate them here to showcase the [functionality](/blog/hosting/negative-seo-via-url-parameter-abuse-in-joomla "Negative SEO via URL Parameter Abuse in Joomla") and (hopefully) inspire your future projects.

The process began with converting the existing logos to SVG, which is a process someone else should describe. Creating the SVG graphics allowed giving each element of the image a different ID and sometimes [CSS](/joomla-techniques/how-to-add-custom-scripts-or-stylesheets-to-a-single-joomla-article-without-losing-your-mind "Add Custom Scripts or Stylesheets to a Joomla Article") class name. This is critical to implementing this kind of style automation/animation.

My own R [logo](/blog/personal/east-mini-dachshunds-texas-logo-work "East Mini Dachshunds Texas (Logo Work)") is created and style using these methods. The logos at the site's top and bottom are actually the same image, styled using CSS.

Originally, each section of the site had a different class name applied to the body element, and that class name determined which style was applied to ALL of the SVG graphics on the site. There were hover listeners on the different section links which would cause the entire site style to shift to that section style when hovered, it was super cool. If you were hovering over the link to a section, you would get a preview of the style in that section.

I have re-created some of that coordinated styling with the Global Styling buttons below.

All of the changes are affected by using CSS variables. The [javascript](/blog/development/server-timing-for-geoip-data-delivery-to-achieve-gdpr-compliance "Server-Timing for GeoIP Data Delivery to Achieve GDPR Compliance") that applies styles on this page sets a CSS variable to a new color. The color change, the smooth transitions, it's all CSS. That's all it takes with SVG graphics designed to use CSS variables.

Remember, these are SVG images - and none contain [animations](/test-article "Shader BG Test"). Everything is controllable externally.

## SVGs

### Global Styling

Style 1 Style 2 Style 3 Style 4

### Logo 1

version="1.0" encoding="UTF-8" standalone="no"?

 

Bird Color 

Star Color 

State Color 

Style 1 Style 2 (Subdued) Style 3 (LSU) Style 4 (A&amp;M)

 

 

### Logo 2

version="1.0" encoding="UTF-8" standalone="no"?

 

Bird Color1 

Bird Color2 

R Fill Color 

R Border Color 

Style 1 Style 2 Style 3 (Coffee) Style 4 (Gatorade) Bonus Style

 

 

### Feather

version="1.0" encoding="utf-8"?

 

Random (Animated)

 

 

### This Thing

version="1.0" encoding="UTF-8" standalone="no"?

 

 



- [      email ](mailto:?subject=Fun+With+SVG+Graphics&body=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Ffun-with-svgs)
- [      facebook ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Ffun-with-svgs)
- [      x-twitter ](https://twitter.com/intent/tweet?text=Fun+With+SVG+Graphics%3A+https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Ffun-with-svgs)
- [      linkedin ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Ffun-with-svgs&title=Fun+With+SVG+Graphics&summary=So+I+did+a+bunch+of+SVG+work+I+donated+to+a+politi...)
- [      pinterest ](http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Ffun-with-svgs&media=https%3A%2F%2Fcdn.joomla.org%2Fimages%2Fjoomla-org-og.jpg&description=Fun+With+SVG+Graphics)
 


 

   [  Previous article: GPC: DNT/Do Not Track’s Toothless Twin   GPC: DNT/Do Not Track’s Toothless Twin ](/blog/development/gpc-dnt-do-not-tracks-toothless-twin) [  Next article: Joomla 4 Extensions - It begins!  Joomla 4 Extensions - It begins!  ](/blog/development/joomla-4-extensions-it-begins)  

##### We Value Your Privacy

 

We use cookies to enhance your experience and for traffic analysis. By continuing to visit this site you agree to our use of cookies.

[Privacy Policy](/privacy-policy)

 Details 

###### Google Tag Manager Items

- Ad Storage
- Ad User Data
- Ad Personalization
- Analytics Storage
- Functionality Storage
- Personalization Storage
- Security Storage
 
 

 

 

 

 

 Decline Accept
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.richeyweb.com/#organization","name":"RicheyWeb","url":"https://www.richeyweb.com/","logo":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/logo/richeyweb.svg","contentUrl":"https://www.richeyweb.com/images/logo/richeyweb.svg","width":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"@id":"https://www.richeyweb.com/#logo"},"image":{"@id":"https://www.richeyweb.com/#logo"},"sameAs":["https://x.com/ComRicheyweb","https://www.facebook.com/RicheyWebDev/","https://www.youtube.com/channel/UCxnVG8BwOvQRO7hVqNX7T2g","https://community.joomla.org/service-providers-directory/listings/115:richeyweb.html"],"description":"RicheyWeb is a custom software developer specializing in Joomla extensions.","ContactPoint":[{"@type":"ContactPoint","url":"https://www.richeyweb.com/contact-us","telephone":"903-873-8460","contactType":"Owner/Administrator","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"},{"@type":"ContactPoint","url":"https://www.richeyweb.com/bugs","telephone":"903-873-8460","contactType":"Technical Support","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"}],"knowsAbout":["Computer programming",{"@type":"Thing","name":"Computer programming","sameAs":["https://en.wikipedia.org/wiki/Computer_programming","https://www.wikidata.org/wiki/Q80006","https://g.co/kg/m/01mf_"]},"PHP",{"@type":"Thing","name":"PHP","sameAs":["https://en.wikipedia.org/wiki/PHP","https://www.wikidata.org/wiki/Q59","https://g.co/kg/m/060kv"]},"JavaScript",{"@type":"Thing","name":"JavaScript","sameAs":["https://en.wikipedia.org/wiki/JavaScript","https://www.wikidata.org/wiki/Q2005","https://g.co/kg/m/02p97"]},"arduino","Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"White hat",{"@type":"Thing","name":"White hat","sameAs":["https://en.wikipedia.org/wiki/White_hat_(computer_security)","https://www.wikidata.org/wiki/Q7995625","https://g.co/kg/m/03ns_5"]},"Search engine optimization",{"@type":"Thing","name":"Search engine optimization","sameAs":["https://en.wikipedia.org/wiki/Search_engine_optimization","https://www.wikidata.org/wiki/Q180711","https://g.co/kg/m/019qb_"]},"Search engine marketing",{"@type":"Thing","name":"Search engine marketing","sameAs":["https://en.wikipedia.org/wiki/Search_engine_marketing","https://www.wikidata.org/wiki/Q846132","https://g.co/kg/m/06mw8r"]},"Digital marketing",{"@type":"Thing","name":"Digital marketing","sameAs":["https://en.wikipedia.org/wiki/Digital_marketing","https://www.wikidata.org/wiki/Q1323528","https://g.co/kg/g/122hcnps"]},"Web hosting service",{"@type":"Thing","name":"Web hosting service","sameAs":["https://en.wikipedia.org/wiki/Web_hosting_service","https://www.wikidata.org/wiki/Q5892272","https://g.co/kg/m/014pz4"]},"Email hosting service",{"@type":"Thing","name":"Email hosting service","sameAs":["https://en.wikipedia.org/wiki/Email_hosting_service","https://www.wikidata.org/wiki/Q5368818","https://g.co/kg/m/09w60m"]},"Internet hosting service",{"@type":"Thing","name":"Internet hosting service","sameAs":["https://en.wikipedia.org/wiki/Internet_hosting_service","https://www.wikidata.org/wiki/Q1210425","https://g.co/kg/m/09w5yw"]},"Virtual hosting",{"@type":"Thing","name":"Virtual hosting","sameAs":["https://en.wikipedia.org/wiki/Virtual_hosting","https://www.wikidata.org/wiki/Q588365","https://g.co/kg/m/024mvh"]},"Web performance",{"@type":"Thing","name":"Web performance","sameAs":["https://en.wikipedia.org/wiki/Web_performance","https://www.wikidata.org/wiki/Q7978612","https://g.co/kg/m/0gfj3f1"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"General Data Protection Regulation",{"@type":"Thing","name":"General Data Protection Regulation","sameAs":["https://en.wikipedia.org/wiki/General_Data_Protection_Regulation","https://www.wikidata.org/wiki/Q1172506","https://g.co/kg/m/0pk_7xs"]},"SERP",{"@type":"Thing","name":"SERP","sameAs":["https://en.wikipedia.org/wiki/SERP","https://www.wikidata.org/wiki/Q2205811","https://g.co/kg/g/11c5szp7kc"]},"Artificial intelligence",{"@type":"Thing","name":"Artificial intelligence","sameAs":["https://en.wikipedia.org/wiki/Artificial_intelligence","https://www.wikidata.org/wiki/Q11660","https://g.co/kg/m/0mkz"]},"Prompt engineering",{"@type":"Thing","name":"Prompt engineering","sameAs":["https://en.wikipedia.org/wiki/Prompt_engineering","https://www.wikidata.org/wiki/Q108941486","https://g.co/kg/g/11p6kpgt_n"]},"E-learning",{"@type":"Thing","name":"E-learning","sameAs":["https://en.wikipedia.org/wiki/E-learning_(theory)","https://www.wikidata.org/wiki/Q182250","https://g.co/kg/g/122czm1f"]},"Sharable Content Object Reference Model",{"@type":"Thing","name":"Sharable Content Object Reference Model","sameAs":["https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model","https://www.wikidata.org/wiki/Q827811","https://g.co/kg/m/06_40"]},"Experience API",{"@type":"Thing","name":"Experience API","sameAs":["https://en.wikipedia.org/wiki/Experience_API","https://www.wikidata.org/wiki/Q7807728","https://g.co/kg/g/1yw9ktxr8"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]},"Nginx",{"@type":"Thing","name":"Nginx","sameAs":["https://en.wikipedia.org/wiki/Nginx","https://www.wikidata.org/wiki/Q306144","https://g.co/kg/m/02qft91"]},"MySQL",{"@type":"Thing","name":"MySQL","sameAs":["https://en.wikipedia.org/wiki/MySQL","https://www.wikidata.org/wiki/Q850","https://g.co/kg/m/04y3k"]}],"areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"memberOf":["Mensa International",{"@type":"Organization","name":"Mensa International","sameAs":["https://en.wikipedia.org/wiki/Mensa_International","https://www.wikidata.org/wiki/Q184194","https://g.co/kg/m/0140pf"]},"National Rifle Association",{"@type":"Organization","name":"National Rifle Association","sameAs":["https://en.wikipedia.org/wiki/National_Rifle_Association","https://www.wikidata.org/wiki/Q863259","https://g.co/kg/m/0j6f9"]},"CompTIA",{"@type":"Organization","name":"CompTIA","sameAs":["https://en.wikipedia.org/wiki/CompTIA","https://www.wikidata.org/wiki/Q597534","https://g.co/kg/m/040shq"]},"ISFCE LLC",{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://isfce.com","https://g.co/kg/g/11wxm5r0rg"]}],"hasCredential":[{"@type":"EducationalOccupationalCredential","name":"Joomla 3 Certified Administrator","credentialCategory":"Certification","description":"Administrator Exam is the first available Joomla! certification exam","recognizedBy":{"@type":"Organization","name":"Open Source Matters, Inc.","sameAs":["https://en.wikipedia.org/wiki/Open_Source_Matters,_Inc.","https://g.co/kg/g/11f00wvjhz"]},"url":"https://certification.joomla.org/certified-user-directory/michael-richey","about":["Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/badge.webp","contentUrl":"https://www.richeyweb.com/images/contact/badge.webp","width":{"@type":"QuantitativeValue","value":300,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":86,"unitCode":"PX"},"caption":"Joomla 3 Certified Administrator"}},{"@type":"EducationalOccupationalCredential","name":"Certified Computer Examiner","credentialCategory":"Certification","description":"Internationally recognized computer forensics certifiecation","recognizedBy":{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://en.wikipedia.org/wiki/ISFCE_LLC","https://g.co/kg/g/11wxm5r0rg"]},"url":"https://isfce.com/","about":["Digital forensics",{"@type":"Thing","name":"Digital forensics","sameAs":["https://en.wikipedia.org/wiki/Digital_forensics","https://www.wikidata.org/wiki/Q3246940","https://g.co/kg/m/0cnxzfx"]},"Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"Mobile device forensics",{"@type":"Thing","name":"Mobile device forensics","sameAs":["https://en.wikipedia.org/wiki/Mobile_device_forensics","https://www.wikidata.org/wiki/Q6887097","https://g.co/kg/m/06zp3tp"]},"Network forensics",{"@type":"Thing","name":"Network forensics","sameAs":["https://en.wikipedia.org/wiki/Network_forensics","https://www.wikidata.org/wiki/Q7001032","https://g.co/kg/m/05pb280"]},"Database forensics",{"@type":"Thing","name":"Database forensics","sameAs":["https://en.wikipedia.org/wiki/Database_forensics","https://www.wikidata.org/wiki/Q5227405","https://g.co/kg/m/0cgqsy"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/isfce-cce.webp","contentUrl":"https://www.richeyweb.com/images/contact/isfce-cce.webp","width":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"caption":"Certified Computer Examiner"}}],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Web Services","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Search Engine Optimization"}}]}},{"@type":"WebSite","@id":"https://www.richeyweb.com/#website","url":"https://www.richeyweb.com/","name":"RicheyWeb","publisher":{"@id":"https://www.richeyweb.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.richeyweb.com/search?q={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string","valueMaxLength":256,"valueMinLength":2,"valuePattern":"^[A-Za-z0-9\\s]+$"}},"creator":{"@id":"https://www.richeyweb.com/#organization"},"copyrightHolder":{"@id":"https://www.richeyweb.com/#organization"}},{"@type":"WebPage","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#webpage","url":"https://www.richeyweb.com/blog/development/fun-with-svgs","name":"Fun With SVG Graphics","description":"Explore the power of SVGs with CSS variables for dynamic styling, transitions, and automation in web design projects.","isPartOf":{"@id":"https://www.richeyweb.com/#website"},"about":{"@id":"https://www.richeyweb.com/#organization"},"inLanguage":"en-GB"},{"@type":"Article","headline":"Fun With SVG Graphics","description":"Explore the power of SVGs with CSS variables for dynamic styling, transitions, and automation in web design projects.","author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"},"datePublished":"2025-02-06T00:00:00+00:00","dateModified":"2026-03-30T00:00:00+00:00","about":["Global Styling","SVG",{"@type":"Thing","name":"SVG","sameAs":["https://en.wikipedia.org/wiki/SVG","https://www.wikidata.org/wiki/Q2078","https://g.co/kg/m/06xdp"]},"CSS",{"@type":"Thing","name":"CSS","sameAs":["https://en.wikipedia.org/wiki/CSS","https://www.wikidata.org/wiki/Q46441","https://g.co/kg/m/015tjh"]},"Logo",{"@type":"Thing","name":"Logo","sameAs":["https://en.wikipedia.org/wiki/Logo","https://www.wikidata.org/wiki/Q1886349","https://g.co/kg/m/0dwx7"]},"Product demonstration",{"@type":"Thing","name":"Product demonstration","sameAs":["https://en.wikipedia.org/wiki/Product_demonstration","https://www.wikidata.org/wiki/Q4157632","https://g.co/kg/m/047s2jr"]},"Technology demonstration",{"@type":"Thing","name":"Technology demonstration","sameAs":["https://en.wikipedia.org/wiki/Technology_demonstration","https://www.wikidata.org/wiki/Q2498244","https://g.co/kg/m/03vfht"]}],"mentions":["Graphics software",{"@type":"Thing","name":"Graphics software","sameAs":["https://en.wikipedia.org/wiki/Graphics_software","https://www.wikidata.org/wiki/Q868410","https://g.co/kg/m/05xkk1"]},"Inkscape",{"@type":"Thing","name":"Inkscape","sameAs":["https://en.wikipedia.org/wiki/Inkscape","https://www.wikidata.org/wiki/Q8041","https://g.co/kg/m/025b4m"]},"Media Commentator",{"@type":"Thing","name":"Media Commentator","sameAs":["https://en.wikipedia.org/wiki/Media_Commentator","https://g.co/kg/g/11svbjxl99"]},"Front-end web development",{"@type":"Thing","name":"Front-end web development","sameAs":["https://en.wikipedia.org/wiki/Front-end_web_development","https://www.wikidata.org/wiki/Q4130556","https://g.co/kg/m/010gqt_p"]},"Raven Harrison",{"@type":"Person","name":"Raven Harrison","sameAs":["https://en.wikipedia.org/wiki/Raven_Harrison","https://g.co/kg/g/11x5y0_4xg"]},{"@type":"Article","@id":"https://www.richeyweb.com/test-article#article","url":"https://www.richeyweb.com/test-article","name":"Shader BG Test","headline":"Shader BG Test","author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/blog/hosting/negative-seo-via-url-parameter-abuse-in-joomla#article","url":"https://www.richeyweb.com/blog/hosting/negative-seo-via-url-parameter-abuse-in-joomla","name":"Negative SEO via URL Parameter Abuse in Joomla","headline":"Negative SEO via URL Parameter Abuse in Joomla","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/negative-seo-canonical-url/negative-seo-junk-query-parameters.webp","contentUrl":"https://www.richeyweb.com/images/articles/negative-seo-canonical-url/negative-seo-junk-query-parameters.webp","width":{"@type":"QuantitativeValue","value":889,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":499,"unitCode":"PX"},"caption":"Negative SEO via URL Parameter Abuse in Joomla"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/blog/development/server-timing-for-geoip-data-delivery-to-achieve-gdpr-compliance#article","url":"https://www.richeyweb.com/blog/development/server-timing-for-geoip-data-delivery-to-achieve-gdpr-compliance","name":"Server-Timing for GeoIP Data Delivery to Achieve GDPR Compliance","headline":"Server-Timing for GeoIP Data Delivery to Achieve GDPR Compliance","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/geoip-coming-soon/geoip-coming-soon.webp","contentUrl":"https://www.richeyweb.com/images/articles/geoip-coming-soon/geoip-coming-soon.webp","width":{"@type":"QuantitativeValue","value":508,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":285,"unitCode":"PX"},"caption":"Server-Timing for GeoIP Data Delivery to Achieve GDPR Compliance"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/blog/personal/east-mini-dachshunds-texas-logo-work#article","url":"https://www.richeyweb.com/blog/personal/east-mini-dachshunds-texas-logo-work","name":"East Mini Dachshunds Texas (Logo Work)","headline":"East Mini Dachshunds Texas (Logo Work)","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/east-mini-dachshunds-texas/east-mini-dachshunds-texas.png","contentUrl":"https://www.richeyweb.com/images/articles/east-mini-dachshunds-texas/east-mini-dachshunds-texas.png","width":{"@type":"QuantitativeValue","value":1343,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":953,"unitCode":"PX"},"caption":"East Mini Dachshunds Texas (Logo Work)"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/blog/personal/cock-cock-boom-logo-work#article","url":"https://www.richeyweb.com/blog/personal/cock-cock-boom-logo-work","name":"CockCockBoom.com (Logo Work)","headline":"CockCockBoom.com (Logo Work)","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/cock-cock-boom/cock-cock-boom-16x9.webp","contentUrl":"https://www.richeyweb.com/images/articles/cock-cock-boom/cock-cock-boom-16x9.webp","width":{"@type":"QuantitativeValue","value":1102,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":619,"unitCode":"PX"},"caption":"CockCockBoom.com (Logo Work)"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/joomla-techniques/how-to-add-custom-scripts-or-stylesheets-to-a-single-joomla-article-without-losing-your-mind#article","url":"https://www.richeyweb.com/joomla-techniques/how-to-add-custom-scripts-or-stylesheets-to-a-single-joomla-article-without-losing-your-mind","name":"Add Custom Scripts or Stylesheets to a Joomla Article","headline":"Add Custom Scripts or Stylesheets to a Joomla Article","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/thumbs-up-kid.webp","contentUrl":"https://www.richeyweb.com/images/articles/thumbs-up-kid.webp","width":{"@type":"QuantitativeValue","value":600,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":337,"unitCode":"PX"},"caption":"Add Custom Scripts or Stylesheets to a Joomla Article"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}}],"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#article","isPartOf":{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#webpage"},"publisher":{"@id":"https://www.richeyweb.com/#organization"},"keywords":"SVG, CSS, CSS variables, SVG graphics, style automation, style, color, transitions, animations, Javascript, variables, logo, bird color, star color, state color, rase, fill color, border color, feather, coordinated styling, style 1, style 2, style 3, style 4, global styling, svginclude, images, articles, ravenlogo.svg, rbase.svg, Prismatic-Feather-4.svg, animated, preview, hover, section links, body element, style applied, color change, controllable externally, project, features, functionality, process, elements, ID, class name, style, design","articleSection":"Development","url":"https://www.richeyweb.com/blog/development/fun-with-svgs","hasPart":[{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-svgs_2_1"},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-global-styling_3_2"},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-logo-1_3_3"},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-logo-2_3_4"},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-feather_3_5"},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-this-thing_3_6"}]},{"@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex","@type":"ItemList","name":"Fun With SVG Graphics","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-svgs_2_1","name":"SVGs","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-svgs_2_1"}},{"@type":"ListItem","position":2,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-global-styling_3_2","name":"Global Styling","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-global-styling_3_2"}},{"@type":"ListItem","position":3,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-logo-1_3_3","name":"Logo 1","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-logo-1_3_3"}},{"@type":"ListItem","position":4,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-logo-2_3_4","name":"Logo 2","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-logo-2_3_4"}},{"@type":"ListItem","position":5,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-feather_3_5","name":"Feather","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-feather_3_5"}},{"@type":"ListItem","position":6,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/fun-with-svgs#articleindex-toc-this-thing_3_6","name":"This Thing","url":"https://www.richeyweb.com/blog/development/fun-with-svgs#toc-this-thing_3_6"}}]}]}
```
