Convert SVG images to PNG (#2155)

cmd/asset-syncer/utils.go

@@ -25,6 +25,7 @@ import (
 	"crypto/x509"
 	"errors"
 	"fmt"
+	"image"
 	"io"
 	"io/ioutil"
 	"net/http"
@@ -42,6 +43,8 @@ import (
 	"github.com/kubeapps/common/datastore"
 	"github.com/kubeapps/kubeapps/pkg/chart/models"
 	log "github.com/sirupsen/logrus"
+	"github.com/srwiley/oksvg"
+	"github.com/srwiley/rasterx"
 	helmrepo "k8s.io/helm/pkg/repo"
 )
 
@@ -85,7 +88,7 @@ type assetManager interface {
 	InvalidateCache() error
 	updateIcon(repo models.Repo, data []byte, contentType, ID string) error
 	filesExist(repo models.Repo, chartFilesID, digest string) bool
-	insertFiles(chartId string, files models.ChartFiles) error
+	insertFiles(chartID string, files models.ChartFiles) error
 }
 
 func newManager(config datastore.Config, kubeappsNamespace string) (assetManager, error) {
@@ -356,30 +359,35 @@ func (f *fileImporter) fetchAndImportIcon(c models.Chart, r *models.RepoInternal
 
 	b := []byte{}
 	contentType := ""
+	var img image.Image
+	// if the icon is in any other format try to convert it to PNG
 	if strings.Contains(res.Header.Get("Content-Type"), "image/svg") {
-		// if the icon is a SVG file simply read it
-		b, err = ioutil.ReadAll(res.Body)
+		// if the icon is an SVG, it requires special processing
+		icon, err := oksvg.ReadIconStream(res.Body)
 		if err != nil {
+			log.WithFields(log.Fields{"name": c.Name}).WithError(err).Error("failed to decode icon")
 			return err
 		}
-		contentType = res.Header.Get("Content-Type")
+		w, h := int(icon.ViewBox.W), int(icon.ViewBox.H)
+		icon.SetTarget(0, 0, float64(w), float64(h))
+		rgba := image.NewNRGBA(image.Rect(0, 0, w, h))
+		icon.Draw(rasterx.NewDasher(w, h, rasterx.NewScannerGV(w, h, rgba, rgba.Bounds())), 1)
+		img = rgba
 	} else {
-		// if the icon is in any other format try to convert it to PNG
-		orig, err := imaging.Decode(res.Body)
+		img, err = imaging.Decode(res.Body)
 		if err != nil {
 			log.WithFields(log.Fields{"name": c.Name}).WithError(err).Error("failed to decode icon")
 			return err
 		}
-
-		// TODO: make this configurable?
-		icon := imaging.Fit(orig, 160, 160, imaging.Lanczos)
-
-		var buf bytes.Buffer
-		imaging.Encode(&buf, icon, imaging.PNG)
-		b = buf.Bytes()
-		contentType = "image/png"
 	}
 
+	// TODO: make this configurable?
+	resizedImg := imaging.Fit(img, 160, 160, imaging.Lanczos)
+	var buf bytes.Buffer
+	imaging.Encode(&buf, resizedImg, imaging.PNG)
+	b = buf.Bytes()
+	contentType = "image/png"
+
 	return f.manager.updateIcon(models.Repo{Namespace: r.Namespace, Name: r.Name}, b, contentType, c.ID)
 }
 

dashboard/src/components/PageHeader/PageHeader.scss

@@ -5,9 +5,14 @@
   border-bottom: 2px solid #f1f1f1;
   background-color: white;
 
-  img {
-    max-height: 3rem;
-    margin: 0.2rem 0 0.2rem 0.6rem;
+  .img-container {
+    display: flex;
+    align-items: center;
+    img {
+      max-height: 3rem;
+      max-width: 7rem;
+      margin: 0.2rem 0 0.2rem 0.6rem;
+    }
   }
   .kubeapps-header-content {
     width: 100%;

dashboard/src/components/PageHeader/PageHeader.tsx

@@ -33,7 +33,7 @@ function PageHeader({
         <Row>
           <Column span={7}>
             <div className="kubeapps-title-section">
-              {icon && <Icon icon={icon} />}
+              <div className="img-container">{icon && <Icon icon={icon} />}</div>
               <div className="kubeapps-title-block">
                 {titleSize === "lg" ? <h1>{title}</h1> : <h3>{title}</h3>}
                 {helm && (

go.mod

@@ -40,6 +40,8 @@ require (
 	github.com/sirupsen/logrus v1.6.0
 	github.com/spf13/cobra v1.0.0
 	github.com/spf13/pflag v1.0.5
+	github.com/srwiley/oksvg v0.0.0-20200311192757-870daf9aa564
+	github.com/srwiley/rasterx v0.0.0-20200120212402-85cb7272f5e9
 	github.com/stretchr/testify v1.6.1
 	github.com/unrolled/render v1.0.1 // indirect
 	github.com/urfave/negroni v1.0.0

go.sum

@@ -664,6 +664,10 @@ github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.3.2/go.mod h1:ZiWeW+zYFKm7srdB9IoDzzZXaJaI5eL9QjNiN/DMA2s=
 github.com/spf13/viper v1.4.0/go.mod h1:PTJ7Z/lr49W6bUbkmS1V3by4uWynFiR9p7+dSq/yZzE=
+github.com/srwiley/oksvg v0.0.0-20200311192757-870daf9aa564 h1:HunZiaEKNGVdhTRQOVpMmj5MQnGnv+e8uZNu3xFLgyM=
+github.com/srwiley/oksvg v0.0.0-20200311192757-870daf9aa564/go.mod h1:afMbS0qvv1m5tfENCwnOdZGOF8RGR/FsZ7bvBxQGZG4=
+github.com/srwiley/rasterx v0.0.0-20200120212402-85cb7272f5e9 h1:m59mIOBO4kfcNCEzJNy71UkeF4XIx2EVmL9KLwDQdmM=
+github.com/srwiley/rasterx v0.0.0-20200120212402-85cb7272f5e9/go.mod h1:mvWM0+15UqyrFKqdRjY6LuAVJR0HOVhJlEgZ5JWtSWU=
 github.com/streadway/amqp v0.0.0-20190404075320-75d898a42a94/go.mod h1:AZpEONHx3DKn8O/DFsRAY58/XVQiIPMTMB1SddzLXVw=
 github.com/streadway/amqp v0.0.0-20190827072141-edfb9018d271/go.mod h1:AZpEONHx3DKn8O/DFsRAY58/XVQiIPMTMB1SddzLXVw=
 github.com/streadway/handy v0.0.0-20190108123426-d5acb3125c2a/go.mod h1:qNTQ5P5JnDBl6z3cMAg/SywNDC5ABu5ApDIw6lUbRmI=