Fluid class for .svgs?

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Fluid class for .svgs?

MWCCredit pro premium priority asked 7 years ago

Hello! I was wondering what the best practices were to replace a .jpg with a .svg using the 'fluid' class img-fluid class does not work with .svg. So replacing a img-fluid image results in the .svg parenting the to the upper-left hand corner and not scaling with   Thank you for your assistance

MWCCredit pro premium priority answered 7 years ago

Thank you Ollie.   The following style worked for me   .svg-container { display: inline block; position: relative height: 100%; width: 60%; padding-bottom: 20px vertical-align: middle; overflow: hidden; margin: auto; }    

Ollie Vincent pro answered 7 years ago

Hi,

The image-fluid class is

img{max-width:100%;}

so could you not do something similar for svg's?

I have never tried it, I just use FontAwesome 5 :) (which are tehcnically svg's anyway).

I have also found that

svg{display:flex; justify-content:center; align-items:center;}

helps to centre them.

 

 

 

Jakub Strebeyko staff answered 7 years ago

Hi there MWCCreadit, Did Ollie's answer help you? Best, Kuba
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
MWCCredit
Pro User Premium support
45Support score
6Questions 2Answers
0Snippets likes 1Snippets