Home / Questions / 201187
Accepted
Caldeiro
Asked: 2020-10-03 02:39:00 +0800 CST 2020-10-03 02:39:00 +0800 CST

Add svg image by CSS

  • 772

Well as the title says I need to add an svg image to the background of a div. I have to add the image by css yes or yes.

css

.catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 50px;
   text-decoration: none;
   background-image: url("image.svg");
   width:100%;
   height: 100%;
}

html

 <div class="div-btn" >
   <a style="color:'.$color.'; border-color:'.$color.';" class="btn-pdf" href="'.$tipo_catalogo["pdf"]["url"].'">DESCARGAR</a>
</div>
css

3 Answers

  1. I get this:

    .catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("https://image.flaticon.com/icons/svg/337/337946.svg");
   background-size: 30px;
   background-position: 0 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
    <div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

    It will not be a problem of the relative path of the image? Maybe you should try putting the absolute path with respect to your domain.

    • 2

  2. For one thing: You can add a declaration to your wordpress theme's functions.php to allow you to upload svg to media:

    /*************************************************************************************************************************************
    Funcionalidad del tema > Añadir svg a media upload
*************************************************************************************************************************************/

function svg_myme_types($mime_types){
    $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension
    return $mime_types;
}
add_filter('upload_mimes', 'svg_myme_types', 1, 1);

    In addition to that, you can put the images in an images folder inside your theme or your child-theme, which is where the css will look for them from (no need to add more path than the folder name).

    In this case:

    background-image: url("images/image.svg");
    • 1
  3. Best Answer

    Another alternative is to use svg as the data uri:

    .catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans"; 
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' %3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E");
   background-size: 30px;
   background-position: 2px 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
    <div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

    Read more about SVG as data:uri

    • 1